网页布局——grid语法属性详解

概述grid目前兼容性目前还可以，主流浏览器对它的支持力度很大，ie9,10宣布它未来不久会对它有很好的支持，目前则需要使用过时的语法。我相信不久的将来grid将成为每一个前端工作人员必备的布局技能。 属性介绍 1.父元素上的属性   属性 说明 display 设置grid布局 grid-template-rows 设置网格的行数 grid-template-columns 设置网格的列数 grid

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

总结

以上是内存溢出为你收集整理的网页布局——grid语法属性详解全部内容，希望文章能够帮你解决网页布局——grid语法属性详解所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。