grid布局與flex布局有著一定的相似性，grid布局是將容器劃分成行和列，產生單元格，可以看做是二維布局。
採用網格布局的區域，稱為"容器"（container）。容器內部採用網格定位的子元素，稱為"專案"（item）
上面**中，最外層的元素就是容器，內層的三個元素就是專案。
注意：專案只能是容器的頂層子元素，不包含專案的子元素，比如上面**的元素就不是專案。grid 布局只對專案生效。
2 行和列：
容器裡面的水平區域稱為行，垂直區域稱為列。
行和列交叉的區域，稱之為單元格。
通常情況下 n 行 m 列 會產生 n * m 個單元格。
3 網格線 ，劃分網格的線稱之為網格線。 正常情況下 n 行有 n+1根水平網格線，m列有m+1根垂直網格線。
div
指定乙個容器採用網格布局。 預設情況下，容器元素都是塊級元素，但也可以設成行內元素。
div
注意，設為網格布局以後，容器子元素（專案）的float、display: inline-block、display: table-cell、vertical-align和column-*等設定都將失效。
4 容器指定了網格布局以後，接著就要劃分行和列。
grid-template-columns屬性定義每一列的列寬。
grid-template-rows屬性定義每一行的行高。
eg:
.container
上述**指定了乙個三行三列的網格，列寬和行高都是100px。
除了使用px為單位，也可以指定百分比為單位。
eg:
.container
(1) 屬性一： repeat()
有時候重複寫同樣的值很麻煩，尤其當網格比較多時，這時可以使用repeat()函式，簡化重複的值。
repeat()接收兩個引數，第乙個是引數重複的次數，第二個引數是要重複的值。
eg:
.container
上述的示例如圖所示。
repeat()重複某種模式也可以。 例：grid-template-columns:repeat(2, 100px,20px,80px).
上面**定義了6列，第一列和第四列的寬度為100px，第二列和第五列為20px，第三列和第六列為80px。
（2）屬性二： auto-fill()關鍵字：有時單元格的大小是固定的，但容器的大小不固定，為了能夠使每一行或者每一列能夠容納更多的單元格，可以使用auto-fill關鍵字表示自動填充。
eg:
.container表示每列寬度100px,自動填充，直到容器不能夠放置更多的列。
（3） fr關鍵字：
如果兩列的寬度分別為1fr 和 2 fr 表示後者是前者寬度的兩倍。
eg:
.container// 上述表示兩個寬度相同的列。
注：fr 可以和絕對長度的單位結合使用，十分便捷。
eg:
.container
上述表示第一列的寬度為150px,第三列的寬度是第二列的兩倍。
（4） minmax(）關鍵字：
該函式會產生乙個長度範圍，表示長度就在這個範圍之中，接受兩個引數，分別為最大值和最小值。
eg:
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
上述**中，minmax(100px,fr) 表示列寬不小於100px,不大於1fr。
（5）auto關鍵字：表示由瀏覽器自己決定長度。
grid-template-columns: 100px auto 100px;
上面**中，第二列的寬度，基本上等於該列單元格的最大寬度，除非單元格內容設定了min-width，且這個值大於最大寬度。
（6） 網格線的名稱：
在行和列屬性設定時，可以使用方括號指定每一根網格線的名稱，方便以後引用。
eg:
.container
上述中4 根垂直網格線的名稱分別為： c1 c2 c3 c4. 4根水平網格線的名稱為 r1 r2 r3 r4。
注：網格布局允許同一根線有多根名字。
1傳統的兩欄式布局：
eg: display: grid;
grid-template-columns: 70% 30%;
}// 左欄設定為70% 右欄設定為 30%。
2傳統的十二網格布局：
eg:
grid-template-columns: repeat(12, 1fr);
grid-row-gap 屬性設定行與行的間隔（間距）。
grid-column-gap 屬性設定列與列的間隔（間距）。
eg:
.container
grid-gap屬性是grid-column-gap和grid-row-gap的合併簡寫形式，語法如下：
grid-gap: ;
上述等價於：
eg:
.container
若省略第二個值，瀏覽器認為第二個值等於第乙個值。
根據最新標準，上面三個屬性名的grid-字首已經刪除，grid-column-gap和grid-row-gap寫成column-gap和row-gap，grid-gap寫成gap。
詳細的屬性請參考：
Grid網格布局
前言 就目前為止，css的grid和flexbox結合將是解決布局的最佳方案。雖然瀏覽器對css grid和flexbox的屬性未完全支援，但對於實現布局而言，這已是一種非常完美的結合。如果css box alignment module level3能得到更好的支援的話，那麼對於web的布局將是一...
Grid網格布局
flex 布局是軸線布局，只能指定 專案 針對軸線的位置，可以看作是一維布局。grid 布局則是將容器劃分成 行 和 列 產生單元格，然後指定 專案所在 的單元格，可以看作是二維布局。grid 布局遠比 flex 布局強大。可以使用repeat repeat 3,33.33 定義三列，每一列為33....
grid網格布局
1.1 容器和專案 採用網格布局的區域，稱為 容器 container 容器內部採用網格定位的子元素，稱為 專案 item 1.2 行和列 容器裡面的水平區域稱為 行 row 垂直區域稱為 列 column 1.3 單元格 行和列的交叉區域，稱為 單元格 cell 正常情況下，n行和m列會產生n x...