grid目前兼容性目前還可以，主流瀏覽器對它的支持力度很大，ie9,10宣布它未來不久會對它有很好的支持，目前則需要使用過時的語法。我相信不久的將來grid將成為每一個前端工作人員必備的布局技能。
屬性介紹
1.父元素上的屬性
| 屬性 | 說明 |
|---|---|
| display | 設置grid布局 |
| grid-template-rows | 設置網格的行數 |
| grid-template-columns | 設置網格的列數 |
| grid-template-areas | 根據子元素的網格名字來排列 |
| grid-column-gap | 用來指定豎網格軌道的大小 |
| grid-row-gap | 用來指定行網格軌道的大小 |
| grid-gap | grid-column-gap和grid-row-gap這兩個屬性的縮寫方式 |
| justify-items | 網格中所有單元格中的內容在X軸的對齊方式 |
| align-items | 網格中所有單元格中的內容在Y軸的對齊方式 |
| justify-content | 來設置整個網格在網格容器中的X軸的排列方式 |
| align-content | 來設置整個網格在網格容器中的Y軸的排列方式 |
| grid-auto-columns | 設定隱藏的網格的高 |
| grid-auto-rows | 設定隱藏的網格的寬 |
| grid-auto-flow | 在布局的時候，選擇網格填充的方法 |
2.設置子元素上的屬性
| 屬性 | 說明 |
|---|---|
| grid-area | 給單個子元素起名字 |
| grid-column-start | 元素的位置哪跟豎線開始 |
| grid-column-end | 哪跟豎線結束 |
| grid-row-start | 哪跟橫線開始 |
| grid-row-end | 哪跟橫線結束 |
| grid-row | grid-row-start和grid-row-end的縮寫 |
| grid-column | grid-column-start和grid-column-end這兩個屬性的縮寫方式 |
| grid-area | grid-row和grid-column的縮寫 |
| justify-self | 設置單個子元素在其所在的小網格中的X軸排列方式 |
| align-self | 設置單個子元素在其所在的小網格中的Y軸排列方式 |
| align-content | 來設置整個網格在網格容器中的Y軸的排列方式 |