當一個 HTML 元素將 display 屬性設置為 grid 或 inline-grid 后，它就變成了一個網格容器，這個元素的所有直系子元素將成為網格元素。

1、布局

• 啟用grid布局
• 類似與flex布局，不過grid是對每一格進行屬性預設置，如軌道數、間距統一設置；flex更關注于元素之間的排列關系

display: grid;

2、網格軌道

• grid-template-columns：規定一行有多少格，空格分隔，"value value value"表示有三個格子；由于元素會換行排列，columns軌道屬性更加重要
• grid-template-row：規定一行的高度，"value1 value2 value3"表示規定兩行的高度，如果行數超過三行，后續行的高度等于value1

grid-template-columns: auto auto auto auto;

3、間距Gap

• grid-column-gap：column之間的間距
• grid-row-gap：row之間的間距
• grid-gap：grid-row-gap grid-column-gap ；屬于前兩個屬性的集合

4、網格線

• grid-column-start：某一個元素column起始網格線的編號，（grid-column-start和grid-column-end一起寫才生效，只有一個無效）
• grid-column-end：某一個元素column終止網格線的編號，
• grid-row-start: 某一個元素row起始網格的編號，(同理，需要一起使用)
• grid-row-end: 某一個元素row終止網格線的編號，

5、網格別名

• grid設置屬性，可以規定網格的別名，可以同名
• grid-area：1、某一個元素可以設置他占據的網格別名，如.item1 { grid-area: item11; }；2、grid-row-start / grid-column-start / grid-row-end / grid-column-end，設置兩個起始點、兩個終點，占據四條網格線分隔的區域；3、grid-row-start / grid-column-start / span rowNum / span columnNum，設置兩個起始點，不設置終點網格線，而是設置占據的span網格數（類似于單元格合并）
• grid別名時要滿格，每行、每個元素都要照顧到；grid:‘One Two Three’ ‘Four Five’ 這種少一個就會異常

display: grid;
grid:
'One Two Three'
'Four Five Six'