CSS網格布局是一個二維的基于網格的布局系統, 其目的在于完全改變我們設計基于網絡的用戶界面的方式。CSS一直用來布局我們的網頁, 但是他從來沒有做過很好的工作, 最開始我們使用表格,然后 float , position 和 inline-block 。但是這些本質上是css的hack, 并且遺漏了很多重要的功能(例如垂直居中),后來flexbox出現了, 但是他的目的只是為了更簡單的一維布局, 而不是復雜的二維布局。網格是第一個專門為解決布局問題而創建的CSS模塊 在瀏覽器兼容性方面,可以看一下caniuse的數據

網格容器

在元素中應用 display: grid 。這是所有網格布局的直接父元素, 在這個例子中 container 是網格容器

網格項目

網格容器的小孩(例如直接子元素),這里的 item 元素是網格項目,但 sub-item 不是

網格線

構成網格結構的分界線, 他們既可以是垂直的(列)也可以是水平的(行)。這里的黃線是一個列網格線的例子

網格軌道

兩個相鄰網格線之間的空間。你可以把它們想象成網格的列或行。這是第二行和第三行網格線之間的網格軌道

 網格單元格

兩個相鄰的行和兩個相鄰的列網格線之間的空間,也就是網格中的一個單元,這是行網格線1和2之間的網格單元, 以及列網格線2和3

 網格空間

四個網格線包圍的總空間,網格空間可以由任意數量的網格單元組成。這里是行網格線1和3之間的網格空間, 以及列網格線1和3

 網格容器的屬性

display