grid布局也稱作網(wǎng)格布局，用于將元素內(nèi)部劃分為行和列的一個個的單元格，當父元素設置display: grid;時，其子元素的float，display: inline-block，vertical-align等屬性全部失效。通過相關(guān)屬性控制內(nèi)部的布局和內(nèi)容大小，例如：

grid-template-columns： 定義每一列的列寬。

grid-template-rows：定義每一行的行高。

grid-template-areas：定義網(wǎng)格區(qū)域名稱。

grid-column-gap：定義列與列之間的列間距。

grid-row-gap：定義行與行之間的行間距。

grid-gap：同時定義行與列之間的間距。

grid-auto-flow：定義排列順序。

justify-items：定義中內(nèi)容的水平位置。

align-items：定義內(nèi)容的垂直位置。

place-items：同時定義內(nèi)容的水平位置和垂直位置。

justify-content：定義整體內(nèi)容的水平位置。

align-content：定義整體內(nèi)容的垂直位置。

place-content：同時定義整體內(nèi)容的水平位置和垂直位置。

grid布局的子元素屬性有：

grid-column-start：定義子元素所對齊的垂直網(wǎng)格線。

grid-column-end：定義子元素所對齊的垂直網(wǎng)格線。

grid-column：同時定義子元素左邊框和右邊框所對齊的網(wǎng)格線。

grid-row-start：定義項目上邊框所對齊的水平網(wǎng)格線。

grid-row-end：定義項目下邊框所對齊的水平網(wǎng)格線。

grid-row：同時定義項目上邊框和下邊框所對齊的網(wǎng)格線。

grid-area：定義項目位于哪個區(qū)域，區(qū)域由grid-template-areas定義。

justify-self：定義項目在單元格區(qū)域內(nèi)的水平位置。

align-self：定義項目在單元格區(qū)域內(nèi)的垂直位置。

place-self：同時定義項目在單元格區(qū)域內(nèi)的水平和垂直位置。

一般來說grid布局網(wǎng)格的話除了兼容性問題之外都比flex布局好用一些，在項目中還是要看自己對那個布局更加熟練。