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轴的排列方式 |