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 轴的排列方式 |
来源: http://www.bubuko.com/infodetail-3202673.html