详解css3中dispaly的Grid布局与Flex布局

二、grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

.content-box { display: grid; grid-template-columns: repeat(3, 250px); grid-template-rows: repeat(3, 200px); grid-auto-rows: 100px; /* 新增的行高 */ } .box:nth-child(8) { line-height: 80px; grid-row-start: 4; /*设置第四行*/ grid-column-start: 2; /*设置第二列*/ } .box:nth-child(9) { line-height: 80px; grid-row-start: 5; /*设置第五行*/ grid-column-start: 3; /*设置第三列*/ }

上面代码指定新增的行高统一为100px（原始的行高为200px）。

grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

从易读易写的角度考虑，还是建议不要合并属性，所以这里就不详细介绍这两个属性了。

Gird网格布局（项目属性）

grid-column-start、grid-column-end、grid-row-start、grid-row-end属性

grid-column-start属性：左边框所在的垂直网格线

grid-column-end属性：右边框所在的垂直网格线

grid-row-start属性：上边框所在的水平网格线

grid-row-end属性：下边框所在的水平网格线

一、1号项目的左边框是第五根垂直网格线，上边框是第三根水平网格线。

.content-box { display: grid; grid-template-columns: repeat(5, 160px); grid-template-rows: repeat(5, 160px); } .box:nth-child(1) { grid-row-start: 3; /* 上边框是第三根水平网格线 */ grid-column-start: 5; /* 左边框是第五根垂直网格线 */ }

除了1号项目以外，其他项目都没有指定位置，由浏览器自动布局，这时它们的位置由容器的grid-auto-flow属性决定，这个属性的默认值是row，因此会"先行后列"进行排列。我们可以把这个属性的值分别改成column、row dense和column dense，看看其他项目的位置发生了怎样的变化。

二、指定四个边框位置的效果图

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!