一、場景
1? 一個容器設(shè)置了 display: grid屬性，就把容器元素定義了一個網(wǎng)格
2? 設(shè)置列/行的大?。?strong>grid-template-columns / grid-template-rows
3?使用grid-column和 grid-row把它的子元素放入網(wǎng)格
二、重要術(shù)語
1?Grid Container（父容器）
設(shè)置了 display: grid 的元素， 這是所有 grid item 的直接父項(xiàng)。 下面的.container 就是 grid container
<div class="container">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>
2?Grid Item（Grid 容器的孩子）
即直接子元素，下面的 .item 元素就是 grid item，但 .sub-item不是
<div class="container">
<div class="item"></div>
<div class="item">
<p class="sub-item"></p>
</div>
<div class="item"></div>
</div>
3?Grid Line（分界線）
這個分界線組成網(wǎng)格結(jié)構(gòu)。 它們既可以是垂直的（“column grid lines”），也可以是水平的（“row grid lines”），并位于行或列的任一側(cè)。 下面的黃線就是一個列網(wǎng)格線。
4?Grid Track（兩個相鄰網(wǎng)格線之間的空間）
可以把它們想象成網(wǎng)格的列或行。 下面是第二行和第三行網(wǎng)格線之間的網(wǎng)格軌道
5?Grid Cell（兩個相鄰的行和兩個相鄰的列網(wǎng)格線之間的空間）
它是網(wǎng)格的一個“單元”。 下面是行網(wǎng)格線1和2之間以及列網(wǎng)格線2和3的網(wǎng)格單元
6?Grid Area（四個網(wǎng)格線包圍的總空間）
網(wǎng)格區(qū)域可以由任意數(shù)量的網(wǎng)格單元組成。 下面是行網(wǎng)格線1和3以及列網(wǎng)格線1和3之間的網(wǎng)格區(qū)域
三、Grid Container 的部分屬性
1? display
1.1 作用
將元素定義為 grid contaienr，并為其內(nèi)容建立新的網(wǎng)格格式化上下文(grid formatting context)
1.2 用法
.container {
display: grid | inline-grid | subgrid;
}
a). grid ——— 生成一個塊級(block-level)網(wǎng)格
b). inline-grid ——— 生成一個行級(inline-level)網(wǎng)格
c). subgrid ——— 如果你的 grid container 本身就是一個 grid item（即,嵌套網(wǎng)格），可以使用這個屬性來表示你想從它的父節(jié)點(diǎn)獲取它的行/列的大小，而不是指定它自己的大小
注：column, float, clear, 以及 vertical-align 對一個 grid container 沒有影響
2? grid-template
2.1 作用
在單個聲明中定義 grid-template-rows、grid-template-columns、grid-template-areas 的簡寫
2.2 實(shí)例
.container {
grid-template:
[row1-start] "header header header" 25px [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
}
等價于
.container {
grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
grid-template-columns: auto 50px auto;
grid-template-areas:
"header header header"
"footer footer footer";
}
3?grid-gap
3.1 作用
grid-row-gap 和 grid-column-gap 的縮寫
3.2 用法
.container {
grid-gap: <grid-row-gap> <grid-column-gap>;
}
3.3 實(shí)例
.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
grid-gap: 10px 15px;
}
4?justify-items
4.1 作用
a). 沿著行軸對齊網(wǎng)格內(nèi)的內(nèi)容（與之對應(yīng)的是 align-items, 即沿著列軸對齊）
b). 該值適用于容器內(nèi)的所有的 grid items
4.2 用法
.container {
justify-items: start | end | center | stretch;
}
a). start ——— 內(nèi)容與網(wǎng)格區(qū)域的左端對齊
b). end ——— 內(nèi)容與網(wǎng)格區(qū)域的右端對齊
c). center ——— 內(nèi)容位于網(wǎng)格區(qū)域的中間位置
d). stretch ——— 內(nèi)容寬度占據(jù)整個網(wǎng)格區(qū)域空間(這是默認(rèn)值)
5?align-items
5.1 作用
a). 沿著列軸對齊grid item 里的內(nèi)容（與之對應(yīng)的是使用 justify-items 設(shè)置沿著行軸對齊）
b). 該值適用于容器內(nèi)的所有 grid item
5.2 用法
.container {
align-items: start | end | center | stretch;
}
a). start ——— 內(nèi)容與網(wǎng)格區(qū)域的左端對齊
b). end ——— 內(nèi)容與網(wǎng)格區(qū)域的底部對齊
c). center ——— 內(nèi)容位于網(wǎng)格區(qū)域的垂直中心位置
d). stretch ——— 內(nèi)容高度占據(jù)整個網(wǎng)格區(qū)域空間(這是默認(rèn)值)
四、Grid Items 的部分屬性
1?grid-column-start / grid-column-end / grid-row-start /grid-row-end
1.1 作用
a). 使用特定的網(wǎng)格線確定 grid item 在網(wǎng)格內(nèi)的位置。
b). grid-column-start/grid-row-start 屬性表示grid item的網(wǎng)格線的起始位置
c). grid-column-end/grid-row-end屬性表示網(wǎng)格項(xiàng)的網(wǎng)格線的終止位置
1.2 用法
.item {
grid-column-start: <number> | <name> | span <number> | span <name> | auto
grid-column-end: <number> | <name> | span <number> | span <name> | auto
grid-row-start: <number> | <name> | span <number> | span <name> | auto
grid-row-end: <number> | <name> | span <number> | span <name> | auto
}
a). <line> ——— 可以是一個數(shù)字來指代相應(yīng)編號的網(wǎng)格線，也可使用名稱指代相應(yīng)命名的網(wǎng)格線
b). span <number> ——— 網(wǎng)格項(xiàng)將跨越指定數(shù)量的網(wǎng)格軌道
c). span <name> ——— 網(wǎng)格項(xiàng)將跨越一些軌道，直到碰到指定命名的網(wǎng)格線
d). auto ——— 自動布局， 或者自動跨越， 或者跨越一個默認(rèn)的軌道
1.3 實(shí)例
實(shí)例一
.item-a {
grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start
grid-row-end: 3
}
實(shí)例二
.item-b {
grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2
grid-row-end: span 2
}
特別注意：
1)?如果沒有聲明 grid-column-end / grid-row-end，默認(rèn)情況下，該網(wǎng)格項(xiàng)將跨越1個軌道
2)?網(wǎng)格項(xiàng)可以相互重疊。 您可以使用z-index來控制它們的堆疊順序
2?grid-column / grid-row
2.1 作用
grid-column-start + grid-column-end, 和 grid-row-start + grid-row-end 的簡寫形式
2.2 用法
.item {
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}
2.3 實(shí)例
.item-c {
grid-column: 3 / span 2;
grid-row: third-line / 4;
}
特別注意：如果沒有指定結(jié)束行值，則該網(wǎng)格項(xiàng)默認(rèn)跨越1個軌道
3?grid-area
3.1 作用
a). 給 grid item 進(jìn)行命名以便于使用 grid-template-areas 屬性創(chuàng)建模板時來進(jìn)行引用。
b). 可以做為 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的簡寫形式
3.2 用法
.item {
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}
a). <name> - 你的命名
b). <row-start> / <column-start> / <row-end> / <column-end> - 可以是數(shù)字，也可以是網(wǎng)格線的名字
3.3 實(shí)例
.item-d {
grid-area: header
}/*給一個網(wǎng)格項(xiàng)命名*/
作為 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的簡寫:
.item-d {
grid-area: 1 / col4-start / last-line / 6
}
