網(wǎng)格術(shù)語
網(wǎng)格線(Grid Lines)
網(wǎng)格線組成了網(wǎng)格，他是網(wǎng)格的水平和垂直的分界線。一個網(wǎng)格線存在行或列的兩側(cè)。我們可以引用它的數(shù)目或者定義的網(wǎng)格線名稱。
上圖突出顯示的紅線就是第二列的網(wǎng)格線（line2）
-
網(wǎng)格軌道(Grid Track)
網(wǎng)格軌道是就是相鄰兩條網(wǎng)格線之間的空間，就好比表格中行或列。所在在網(wǎng)格中其分為grid column和grid row。每個網(wǎng)格軌道可以設(shè)置一個大小，用來控制寬度或高度。
圖中突出顯示的就是行線line2和line3之間組成的網(wǎng)格軌道 - 網(wǎng)格單元格(Grid Cell)
網(wǎng)格單元格是指四條網(wǎng)格線之間的空間。所以它是最小的單位，就像表格中的單元格。
圖中突出顯示的單元格是由行線line2、line3和列線line2、line3組成的
-
網(wǎng)格區(qū)域(Grid Area)
網(wǎng)格區(qū)域是由任意四條網(wǎng)格線組成的空間，所以他可能包含一個或多個單元格。相當(dāng)于表格中的合并單元格之后的區(qū)域。
圖中突出顯示的網(wǎng)格區(qū)域是行線line1、line3和列線line2、line4之間的區(qū)域，其主要包括了四個網(wǎng)格單元格。 - 網(wǎng)格容器(Grid Containers)
通過使用display屬性給元素顯式設(shè)置了屬性值grid或inline-grid，此時這個元素將自動變成網(wǎng)格容器。這個類似于flexbox一樣，將元素設(shè)置設(shè)置為display:flex，元素將自動變成彈性盒模型。 - 網(wǎng)格單元格順序(order)
網(wǎng)格單元格順序和Flexbox模塊一樣，通過order屬性來對網(wǎng)格單父元格進(jìn)行順序重排。
定義一個網(wǎng)格
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;//列寬 列間距 列寬 列間距 列寬 列間距 列寬
grid-template-rows: auto 10px auto 10px auto;//行高 行間距 行高 行間距 行高
}
基于網(wǎng)格的占位區(qū)
對于網(wǎng)格線，在網(wǎng)格布局中有兩種，一種是列線,另一種是行線。對應(yīng)的個網(wǎng)格單元格都有列線起始線（grid-column-start）、列線終止線(grid-column-end)和行線起始線（grid-row-start）、行線終止線（grid-row-end）。
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
</div>
body {
padding: 50px;
}
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px ;
grid-template-rows: auto 10px auto 10px auto;
}
.box {
background-color: #444;
color: #fff;
font-size: 150%;
padding: 20px;
text-align: center;
}
.a{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.b {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
//以下為簡寫方式
.c {
grid-column: 1/2;
grid-row: 3/4;
}
//以下為網(wǎng)格區(qū)域?qū)懛╣rid-area:row-start/column-start/row-end/column-end
.d {
grid-area: 3/3/4/4
}
.e {
grid-area:5/1/6/2
}
如下圖所示：
gridLayout1.jpg
