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

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

三、这四个属性的值，除了指定为第几个网格线，还可以指定为网格线的名字。（效果和上图一样）

.content-box { display: grid; grid-template-columns: [c1] 160px [c2] 160px [c3] 160px [c4] 160px [c5] 160px [c6]; grid-template-rows: [r1] 160px [r2] 160px [r3] 160px [r4] 160px [r5] 160px [r6]; } .box:nth-child(1) { grid-row-start: r2; grid-row-end: r5; grid-column-start: c1; grid-column-end: c4; }

四、这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。

.content-box { display: grid; grid-template-columns: repeat(5, 160px); grid-template-rows: repeat(5, 160px); } .box:nth-child(1) { grid-column-start: span 3; /* 左右边框跨越3个网格 */ grid-row-start: span 2; /* 上下边框跨越2个网格 */ }

效果和上图一样

.box:nth-child(1) { grid-column-end: span 3; /* 左右边框跨越3个网格 */ grid-row-end: span 2; /* 上下边框跨越2个网格 */ }

使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。

grid-column 属性， grid-row 属性

grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

.box:nth-child(1) { grid-column: <start-line> / <end-line>; grid-row: <start-line> / <end-line>; }

.box:nth-child(1) { grid-column: 1 / 4; grid-row: 2 / 4; } /* 等同于 */ .box:nth-child(1) { grid-column-start: 1; grid-column-end: 4; grid-row-start: 2; grid-row-end: 4; }

在这两个属性中也可以使用span关键字，表示跨越多个网格。

.box:nth-child(1) { grid-column: 1 / span 3; grid-row: 2 / span 3; } /* 等同于 */ .box:nth-child(1) { grid-column-start: 1; grid-column-end: 4; grid-row-start: 2; grid-row-end: 5; }

斜杠以及后面的部分可以省略，默认跨越一个网格

.box:nth-child(1) { grid-column: 1; grid-row: 1; }

grid-area属性

grid-area属性指定项目放在哪一个区域。

.content-box { display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(3, auto); grid-template-areas: 'a b c' 'd e f' 'g h i'; } .box:nth-child(1) { grid-area: e; /* 1号项目位于e区域 */ }

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

.box:nth-child(1) { grid-area: <row-start> / <column-start> / <row-end> / <column-end>; }

.box:nth-child(1) { grid-area: 3 / 3 / 4 / 4; }

justify-self 属性， align-self 属性， place-self 属性

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

一、这两个属性都可以取下面四个值。

.box:nth-child(1) { justify-self: start | end | center | stretch; align-self: start | end | center | stretch; }

start：对齐单元格的起始边缘。

end：对齐单元格的结束边缘。

center：单元格内部居中。

stretch：拉伸，占满单元格的整个宽度（默认值）。

下面是justify-self: start的例子。

.box:nth-child(1) { justify-self: start; }

place-self属性是align-self属性和justify-self属性的合并简写形式。

.box:nth-child(1) { place-self: <align-self> <justify-self>; }

比如：

.box:nth-child(1) { place-self: center center; }

如果省略第二个值，place-self属性会认为这两个值相等。

（编辑：晋中站长网）

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