Grid 布局類似于flex布局，當(dāng)你給一個(gè)容器加上這條display:grid，就意味著它是一個(gè)容器cointainer，也就意味著它的后代的子元素也就成為該容器的member。
容器里面的水平區(qū)域稱為"行"row，垂直區(qū)域稱為"列"column。
注意：設(shè)為網(wǎng)格布局以后，容器子元素（項(xiàng)目）的float、display: inline-block、display: table-cell、vertical-align和column-*等設(shè)置都將失效。
一、grid-template-columns & grid-template-rows
grid-template-columns :定義每一列的列寬
grid-template-rows：定義每一行的行高
代碼
效果
ps:
單位：除了熟悉的
px %，還新增了一個(gè)fr，它就是一個(gè)比例的單位比如
grid-template-columns: 1fr 2fr;，這個(gè)語句就表示者是前者的兩倍。
二、grid-row-gap grid-column-gap grid-gap
grid-row-gap:設(shè)置行與行的間隔（行間距）
grid-column-gap:設(shè)置列與列的間隔（列間距）
grid-gap :是grid-row-gap和 grid-column-gap 的合寫
三、grid-template-areas
grid-template-areas:用于定義區(qū)域。
代碼
效果
四、grid-auto-flow
grid-auto-flow:放置順序，默認(rèn)值為row,即先行后列，效果如上圖
-
grid-auto-flow :column
設(shè)置先列后行
效果 -
grid-auto-flow :row dense:表示"先行后列"，并且盡可能緊密填滿，盡量不出現(xiàn)空格 -
grid-auto-flow:column dense:表示"先列后行"，并且盡量填滿空格
五、justify-items align-items place-items
justify-items:設(shè)置單元格內(nèi)容的水平位置（左中右）
align-items：設(shè)置單元格內(nèi)容的垂直位置（上中下）
他倆的取值一樣，有：
-
start：對(duì)齊單元格的起始邊緣。 -
end：對(duì)齊單元格的結(jié)束邊緣。 -
center：?jiǎn)卧駜?nèi)部居中。 -
stretch：拉伸，占滿單元格的整個(gè)寬度（默認(rèn)值）。
place-items：是justify-items和align-items的合寫
image.png
image.png
六、justify-content align-content place-content
justify-content:整個(gè)內(nèi)容區(qū)域在容器里面的水平位置（左中右）
align-content:整個(gè)內(nèi)容區(qū)域的垂直位置（上中下）
-
start：對(duì)齊容器的起始邊框。 -
end：對(duì)齊容器的結(jié)束邊框。 -
center： 容器內(nèi)部居中。 -
stretch：項(xiàng)目大小沒有指定時(shí)，拉伸占據(jù)整個(gè)網(wǎng)格容器。
-space-around: 每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與容器邊框的間隔大一倍。 -
space-between: 項(xiàng)目與項(xiàng)目的間隔相等，項(xiàng)目與容器邊框之間沒有間隔。 -
space-evenly: 項(xiàng)目與項(xiàng)目的間隔相等，項(xiàng)目與容器邊框之間也是同樣長(zhǎng)度的間隔。
image.png
image.png
place-content ：是justify-content和 align-content的合寫
