前戲
沒有前戲。。
。。。
真的沒有。
Grid布局簡介
不多bb先丟個文檔上來（嗯） 網格布局 - CSS | MDN。
Grid布局示例
拼方塊
要使用網格布局，與flexbox一樣，需要先定義一個容器。
display: grid | inline-grid | subgrid
很簡單，定義好容器之后就可以在容器內分割網格了，與table有些類似。
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
.container {
border: solid 1px rgb(142, 150, 255);
display: grid;
grid-template-columns: repeat(3, 160px);
grid-template-rows: repeat(3, 160px);
}
這里先創建了1個container和5個放在容器中的item，并且為了便于觀察，為container添加了一個邊框。而container的gird-template-columns和grid-template-rows就是為容器劃分網格的屬性。
grid-template-columns: <track-size> ... | <line-name> <track-size> ...
grid-template-rows: <track-size> ... | <line-name> <track-size> ...
這兩個屬性一個負責劃分列，一個負責劃分行。格式例如：grid-template-rows: 50px 100px 150px;，需要多少行（列）就寫多少個值，每個值都代表對應那一行（列）的寬度。
上述代碼將容器劃分為了3*3、每個單元格的寬高均為160px的網格。
但是這些方塊被連成了一片，為了區分他們的邊界，這里需要給這些元素添加一點間距。
.container {
border: solid 2px rgb(142, 150, 255);
display: grid;
grid-template-columns: repeat(3, 160px);
grid-template-rows: repeat(3, 160px);
grid-gap: 8px;
}
grid-gap屬性負責控制網格線的寬度，可以直接理解為行（列）間距。可以分別控制行間距和列間距。
grid-column-gap: <line-size>
grid-row-gap: <line-size>
grid-gap: <grid-row-gap> <grid-column-gap>
現在容器內一共有9個單元格，但只有5個方塊，為了讓這些方塊能夠填滿這個容器，只需要為每個方塊指定分別占用哪些格子即可。
.item:nth-child(1) {
grid-column: 1 / 3;
}
.item:nth-child(2) {
grid-column: 3 / 4;
grid-row: 1 / 3;
}
.item:nth-child(3) {
grid-column: 2 / 4;
grid-row: 3 / 4;
}
.item:nth-child(4) {
grid-row: 2 / 4;
}
grid-column和grid-row屬性分別指定網格項在列和行上占用的網格區域。例如 grid-column: 2 / 4; 指定該網格項在列方向上占用第2條網格線到第4條網格線之間的區域，注意這兩個數值指定的是網格線而不是單元格（除此之外還可以通過第二個值指定該網格項跨越的單元格數量，默認為1）。
grid-column: <start-line> / <end-line> | <start-line> / span <value>
grid-row: <start-line> / <end-line> | <start-line> / span <value>
同樣可以為這兩個屬性分別設置起點與終點
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
而在劃分網格時，可以為網格線定義名稱，并使用grid-row(column)屬性直接通過名稱選擇網格線而非通過數字（默認）。例如：
.container {
grid-template-columns: [line-1] 160px [line2] 160px [line3] 160 [line4] ;
}
.item:nth-child(1) {
grid-column: line1 / line3;
}
實現圣杯布局
到了這里，就可以馬上動手用grid實現一個簡單的圣杯布局。
很簡單，也沒什么好說的，主要是熟悉屬性用法。
再拚一遍方塊
除了使用grid-row和grid-column屬性為網格項指定占用的網格區域，還可以通過grid-area屬性來控制。為了使用這一屬性，需要先在容器內定義屬性grid-template-areas。
.container {
display: grid;
grid-template-columns: repeat(3, 160px);
grid-template-rows: repeat(3, 160px);
grid-gap: 8px;
grid-template-areas:
"item1 item1 item2"
"item4 item5 item2"
"item4 item3 item3";
}
.item:nth-child(1) {
grid-area: item1;
}
.item:nth-child(2) {
grid-area: item2;
}
.item:nth-child(3) {
grid-area: item3;
}
.item:nth-child(4) {
grid-area: item4;
}
可以看出grid-template-areas屬性定義了可視化的網格結構，為每個單元格設置名稱并通過設置網格項的grid-area屬性來指定其所占用的網格區域。
得到的結果是一樣的，因為grid-template-areas使用可視化語法書寫，所以很好理解（可以使用任意數量的相鄰的.來聲明單個空單元格。 只要這些點號之間沒有空格，他們就代表了一個單一的單元格）。
而grid-area除了可以設置網格項對應的名稱外，還可以作為grid-row和grid-column的縮寫。
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>
其他屬性
網格容器屬性
justify-items和align-items：兩個屬性一個是定義單元格內的元素相對單元格行軸方向的對齊方式，一個是定義列軸方向的對齊方式。與flexbox的屬性很相似，不過要注意的是flex是沒有justify-items這個屬性的。
justify-items: start | end | center | stretch
align-items: start | end | center | stretch
justify-content和align-content：同樣和flexbox的屬性相似。一個是定義單元格在網格容器內行軸方向的對齊方式，一個是定義列軸方向的對齊方式。
justify-content: start | end | center | stretch | space-around | space-between | space-evenly
align-content: start | end | center | stretch | space-around | space-between | space-evenly
grid-auto-columns和grid-auto-rows：指定網格的隱式軌道的大小。也就是當網格項的顯式定位超出了網格容器的范圍，在缺少軌道的位置填充的大小。
.container {
display: grid;
grid-template-columns: repeat(3, 160px);
grid-template-rows: repeat(3, 160px);
grid-gap: 8px;
grid-template-areas:
"item1 item1 item2"
"item4 item5 item2"
"item4 item3 item3";
grid-auto-columns: 160px;
}
.item:nth-child(5) {
grid-column: 5 / 6;
}
這里第5個方塊被顯式定位到第5和第6條網格線之間，明顯超出了容器的范圍，于是在第4和第6條網格線之間便存在了2條隱式軌道，而grid-auto-columns就是用來定義這條軌道的寬度。若沒有定義該屬性，則軌道寬度為0（默認）。
grid-auto-columns: <track-size>
grid-auto-rows: <track-size>
grid-auto-flow：用來定義未被定位的網格項的放置規則。很好理解，在最開始的實例中，網格中的5個方塊就是橫著一行一行排下來的（默認row），如果將這個屬性改為column，則會縱向一列一列排過來。
grid-auto-flow: row | column | row dense | column dense
grid：grid-template-rows，grid-template-columns，grid-template-areas，grid-auto-rows，grid-auto-columns和grid-auto-flow的簡寫。
grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]]
網格項屬性
justify-self和align-self：看名字就知道干什么用的了吧。控制單個網格項在單元格內的對齊方式。
justify-self: start | end | center | stretch
align-self: start | end | center | stretch
結語
關于grid布局各屬性的詳細信息如果仍有疑問請手動查閱MDN文檔。
