本篇文章為大家介紹一下網格佈局（grid）的常用屬性。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
教學建議：css影片教學
#和flex佈局不同的是，網格佈局（grid）是一個二維的佈局，可以創建任意行列的佈局。
首先來介紹幾個概念;
想像一個三行三列的佈局，網格線就是構成網格所有的線條，三行三列的佈局每行就會有4條網格線。
網格軌道就是相鄰兩條平行的網格線之間的部分。
和flex佈局一樣，他會有父容器和子項目，在這裡我們稱為網格容器和網格項。
接下來，我們從網格容器到網格項目的各個基本屬性來介紹網格佈局。
#網格容器
網格容器是決定將網格分成幾行幾列，所以首先實作網格佈局就要讓該容器具有以下幾個屬性：
display: grid;
grid-template-columns
grid-template-rows
grid-gap
grid-template-areas
grid-auto-flow: dense | row(default) | column
column## justify-items: start|end|center|stretch(default)
align-items:
start|end|center|stretch(default)
## grid-end|center|stretch(default)## grid- gr auto-columns:
網格佈局的父容器基本屬性就是以上幾個。
display：grid
#表示為網格佈局，和flex佈局中的display：flex意義相同，同樣該屬性還可以取值：inline-grid和subgrid
#grid-template-columns
#建立網格的列數，除了百分比的形式之外，還支援各種單位的組合形式，例如grid-template-columns: 100px 20% 1em 1vw 20%;
但是有個repeate函數可以簡化相同的值，如grid-template-columns: repeat（5， 20%）表示5個20%的寬度，和例子中的意義完全相同。
fr用於等分剩餘空間，它的大小是將該屬性上的所有可計算的值（包括各種單位，百分比）除去後，剩餘空間的大小。
推薦使用fr。它也會自動計算除了grid-gap之外其餘的部分。
如 grid-template-columns：100px 1fr 2fr repeat(2, 20%)。同樣的5列佈局，其中的 1fr 表示寬度為總寬度減去左邊的100px和右側兩列的20%之後剩餘的部分除以三。即第二列的寬度是將會是第三列的一半。
grid-template-rows
#屬性值和grid-template-columns的屬性值完全一樣。
grid-template
#是grid-template-rows和grid-template-columns的縮寫形式，屬性數值的寫法為
grid-template: 1fr 50px/1fr 4fr; //为行数/列数的形式，
程式碼表示兩行兩列的佈局，第一行的高度為底行的50px確定之後剩下的高度。第一列的寬度為將該容器分成五等分，第一列佔據一份，第二列佔據四份。
grid-gap
#可以取一或兩個數值，表示行列之間的間隙。
grid-template-areas
#透過引用grid-area 屬性指定的網格區域(Grid Area)名稱來定義網格模板。重複網格區域的名稱導致內容跨越這些單元格。一個點號（.）代表一個空的網格單元。這個語法本身可視化為網格的可視化結構。
grid-template-areas:
「header header header header」
“main main . sidebar”
“footer footer footer footer”;
grid-auto -flow:
row：告訴自動佈局演算法依序填入每行，依需求新增行
column：告訴自動佈局演算法依序填入每列，依需求新增列
dense：告诉自动布局算法在稍后出现较小的网格项时，尝试填充网格中较早的空缺
justify-items
沿着 行轴线(row axis) 对齐 网格项(grid items) 内的内容
align-items
沿着 列轴线(row axis) 对齐 网格项(grid items) 内的内容
grid-auto-columns:
隐式网格的宽度
grid-auto-rows:
隐式网格的高度
网格项
网格项表示网格内部的直接子元素，不包括子元素的子元素。
常用属性：
grid-column-start: 列网格线 开始，
grid-column-end: 列网格线 结束
grid-column: start/end | start/span count
order: 与z-index的属性相同，表示层叠的位置。
grid-area: 网格名，在使用grid-template-areas时比较有用。
justify-self: 单个网格项在行轴线的对齐方式
align-self: 单个网格项在列轴线的对齐方式
<div class='container'>
<div class='child'></div>
</div>
<style>
.container {
display: grid;
width: 580px;
height: 580px;
grid-gap: 3px;
grid-template-rows: repeat(5, 1fr);
grid-template-columns: repeat(5, 1fr);
background-color: blanchedalmond;
}
.child {
grid-column-start: 6;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 5;
background: url(./babar.png);
background-size: 116px 116px;
order：1；
}
在审查元素的时候毫不意外的发现该布局为五行五列的布局，上述的child中前四行代码属性的值都是以网格线的顺序为基准，前两行代码表示第六列网格线开始，到第三列网格线结束，即表示后三列。其中的start不一定要比end小。第三四行代码表示第一个网格线开始，第五个网格线结束，即表示前四行，四行代码综合起来就如图所示。
当然，child中的前四行代码也可以简写成这样：
grid-row: 1/ 5;
grid-column: 6/ 3;
或者
grid-row: 1/ span 4; // 横向第一个网格线开始，以下的4个网格轨道
grid-column: 3/span 3; // 竖向第三条网格线开始，以后的3个网格轨道
甚至简写成这样
grid-area: 1/3/ span 4/span 3;
更多编程相关知识，请访问：编程教学！！
以上是css網格佈局（grid）的常用屬性介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
