1.1 容器和專案
採用網格布局的區域，稱為"容器"（container）。容器內部採用網格定位的子元素，稱為"專案"（item）。
1.2 行和列
容器裡面的水平區域稱為"行"（row），垂直區域稱為"列"（column）。
1.3 單元格
行和列的交叉區域，稱為"單元格"（cell）。
正常情況下，n行和m列會產生n x m個單元格。比如，3行3列會產生9個單元格。
1.4 網格線
劃分網格的線，稱為"網格線"（grid line）。水平網格線劃分出行，垂直網格線劃分出列。
正常情況下，n行有n + 1根水平網格線，m列有m + 1根垂直網格線，比如三行就有四根水平網格線。
父元素加的屬性
2.1 display 屬性
display: grid或者display: inline-grid指定乙個容器採用網格布局。
注意，設為網格布局以後， 容器子元素（專案）的float、display: inline-block、 display: table-cell、vertical-align和 column-*等設定都將失效。
所有的子元素都會自動轉成塊狀元素
2.2 grid-template-columns，grid-template-rows 屬性
容器指定了網格布局以後，接著就要劃分行和列。 grid-template-columns屬性定義每一列的列寬， grid-template-rows屬性定義每一行的行高。
除了使用絕對單位，也可以使用百分比。
有時候，重複寫同樣的值非常麻煩，尤其網格很多時。這時，可以使用repeat()函式， 簡化重複的值。
repeat()接受兩個引數，第乙個引數是重複的次數（上例是3），第二個引數是所要重複的值。
auto-fill 關鍵字
有時，單元格的大小是固定的，但是容器的大小不確定。 如果希望每一行（或每一列）容納盡可能多的單元格，這時可以使用auto-fill關鍵字表示自動填充。
fr 關鍵字
為了方便表示比例關係，網格布局提供了fr關鍵字（fraction 的縮寫，意為"片段"）。 如果兩列的寬度分別為1fr和2fr，就表示後者是前者的兩倍。
fr可以與絕對長度的單位結合使用，這時會非常方便。
minmax()
minmax()函式產生乙個長度範圍，表示長度就在這個範圍之中。它接受兩個引數，分別為最小值和最大值。
auto 關鍵字
auto關鍵字表示由瀏覽器自己決定長度。
grid-row-gap屬性設定行與行的間隔（行間距）， grid-column-gap屬性設定列與列的間隔（列間距）。
grid-gap屬性是grid-column-gap和grid-row-gap的合併簡寫形式。
如果只寫乙個值，代表兩個值相等
網格布局允許指定"區域"（area），乙個區域由單個或多個單元格組成。 grid-template-areas屬性用於定義區域。
2.5 grid-auto-flow 屬性
這個順序由grid-auto-flow屬性決定，預設值是row， 即"先行後列"。也可以將它設成column，變成"先列後行"。
2.6 justify-items，align-items，place-items 屬性
justify-items屬性設定單元格內容的水平位置（左中右）， align-items屬性設定單元格內容的垂直位置（上中下）。
place-items屬性是align-items屬性和justify-items屬性的合併簡寫形式。
2.7 grid-auto-columns，grid-auto-rows 屬性
有時候，一些專案的指定位置，在現有網格的外部。比如網格只有3列，但是某乙個專案指定在第5行。 這時，瀏覽器會自動生成多餘的網格，以便放置專案。
2.8 grid-template，grid 屬性
子元素加的屬性
3.1 grid-column-start，grid-column-end，grid-row-start，grid-row-end 屬性
專案的位置是可以指定的，具體方法就是指定專案的四個邊框，分別定位在哪根網格線。
1.grid-column-start屬性：左邊框所在的垂直網格線
2.grid-column-end屬性：右邊框所在的垂直網格線
3.grid-row-start屬性：上邊框所在的水平網格線
4.grid-row-end屬性：下邊框所在的水平網格線
3.2 grid-column，grid-row 屬性
grid-column屬性是grid-column-start和grid-column-end的合併簡寫形式， grid-row屬性是grid-row-start屬性和grid-row-end的合併簡寫形式。
3.3 grid-area 屬性
grid-area屬性指定專案放在哪乙個區域。
3.4 justify-self，align-self，place-self 屬性
justify-self屬性設定單元格內容的水平位置（左中右）， 跟justify-items屬性的用法完全一致，但只作用於單個專案
align-self屬性設定單元格內容的垂直位置（上中下）， 跟align-items屬性的用法完全一致，也是只作用於單個專案。
vmin, vmax
vmin vw和vh裡面較小的那個值
vmax vw和vh裡面較大的那個值
iframe
嵌入外部網頁的
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網格布局
將網頁劃分成乙個個網格，可以任意組合不同的網格，做出各種各樣的布局 grid 布局與 flex 布局有一定的相似性，都可以指定容器內部多個專案的位置。但是，它們也存在重大區別。flex 布局是軸線布局，只能指定 專案 針對軸線的位置，可以看作是一維布局。grid 布局則是將容器劃分成 行 和 列 產...