grid佈局
CSS Grid 佈局由兩個核心組成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是實際的 grid(網格)，items 是 grid(網格) 內的內容。
父元素{
display : grid；
}
這還沒有做任何事情，因為我們沒有定義我們希望的 grid(網格) 是怎樣的。它會簡單地將6個 div 堆疊在一起。
Columns(列) 和 rows(行)
使用grid-template-row和grid-template-column屬性
父元素{
display: grid;
grid-template-columns: 200px 50px 100px;
grid-template-rows: 100px 30px;
}
第一列寬200px，第二列寬50px，第三列寬100px
第一行高100px，第二行高30px
如果給的columns*rows大於子元素，會空著
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
3*3=9
子元素只有6個，剩下三個位置就會空著
如果再給子元素設定自身高寬，盒子之間會摞起來(可以自己測試一下設定了grid-template-columns再給子元素設定高寬)
定位和調整 items(子元素) 大小，我們將使用 grid-column
grid-row 屬性來設定：
子元素{
grid-column-start: 1;
grid-column-end: 4;
}
當我們把第一個 items(子元素) 佔據整個第一行時，它把剩下的 items(子元素) 都推到了下一行。
簡寫：
grid-column: 1 / 4;
grid-template-columns: repeat(12, 1fr);
把一行平均分成12列。repeat(12, 1fr) 意思是 12 個重複的 1fr 值。 fr 是網格容器剩餘空間的等分單位。
grid-template-rows: 50px 350px 50px;
grid-gap: 5px; 網格之間的間距是5px
display: grid | inline-grid | subgrid;
- grid ：生成一個塊級網格
- inline-grid ：生成一個內聯網格
- subgrid ：如果你的網格容器本身是另一個網格的網格項（即巢狀網格），你可以使用這個屬性來表示
在 網格容器(Grid Container) 上使用column，float，clear， vertical-align 不會產生任何效果。
grid-template-columns / grid-template-rows
grid-template-areas
四列三行
一個點代表空
grid-column-gap / grid-row-gap
grid-gap