CSS Grid网格布局是为二维布局服务的(同时沿着横向和纵向),Flexbox弹性布局是为一维布局服务的(只能沿横向或纵向的)。CSS Grid网格布局项目属性有grid-column-start、grid-column-end、grid-row-start、grid-row-end、grid-column、grid-row、grid-area、justify-self、align-self、place-self。
注意:float,display: inline-block,display: table-cell,vertical-align和column-*属性对网格项不会起作用。
grid-column-start, grid-column-end, grid-row-start和grid-row-end
通过引用特定的网格线来确定网格项在网格中的位置。grid-column-start/ grid-row-start是网格项开始的行,grid-column-end/ grid-row-end是网格项结束的行。
.item {
grid-column-start: <number> | <name> | span <number> | span <name> | auto;
grid-column-end: <number> | <name> | span <number> | span <name> | auto;
grid-row-start: <number> | <name> | span <number> | span <name> | auto;
grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}
- <unmber>:可以是表示带编号网格线的数字,也可以是表示命名网格线的名称
- span <number>:该网格项将跨越指定的网格数量。
- span <name>:表示当前网格项会自动扩展,直到命中指定的网格线名称。
- auto:表示自动放置,自动跨度或默认跨度为1
.item-a {
grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start;
grid-row-end: 3;
}
.item-b {
grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2;
grid-row-end: span 2;
}
如果未声明grid-column-end/ grid-row-end,默认情况下该网格项将跨越1个网格数量。
项目可以相互重叠。您可以z-index用来控制其堆叠顺序。
grid-column、grid-row
grid-column和grid-row都是简写,前者是grid-column-start + grid-column-end的缩写,后者是grid-row-start + grid-row-end的缩写。
语法上是使用斜杠分隔,如下:
.item {
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}
语法中的管道分隔符|表示“或者”的意思。然后<start-line>就是grid-*-start属性值,<end-line>就是grid-*-end属性值。例如:
.item{
grid-column: 3 / span 2;
grid-row: third-line / 4;
}
如果没有声明结束行值,默认情况下该网格项将跨越1个网格数量。
grid-area
grid-area为网格项指定一个名称,以便于网络容器属性grid-template-areas引用该网格项。 其实grid-area也算是grid-row-start, grid-column-start, grid-row-end 以及 grid-column-end属性的简写。
.item {
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}
- <name>:区域名称。方便网络容器属性grid-template-areas属性引用。
- <row-start> / <column-start> / <row-end> / <column-end>:占据网格区域的行列起始位置。
.item-d {
grid-area: 1 / col4-start / last-line / 6;
}
速记:行开始/列开始/行结束/列结束。
justify-self
- justify-self表示单个网格项的水平对齐方式。
- start:将网格项与单元格的左侧对齐。
- end:将网格项与单元格的右侧对齐。
- center:将网格项在单元格中水平居中对齐显示。
- stretch:填充网格项的整个宽度(这是默认设置)
要为网格中的所有网格项设置对齐方式,也可以通过网格容器属性justify-items上设置此行为。
align-self
align-self指定了网格元素的垂直呈现方式,是垂直拉伸显示,还是上中下对齐。
- start:将网格项与单元格的顶部对齐。
- end:将网格项与单元格的底部对齐。
- center:将网格项在单元格中垂直居中对齐。
- stretch:填充单元格的整个高度(这是默认设置)。
要对齐网格中的所有网格项,也可以通过网格容器属性align-items上设置此行为。
place-self
place-self是align-self和justify-self属性的简写。
- auto:布局模式的“默认”对齐方式。
- <align-self> / <justify-self>:第一个值align-self,第二个值justify-self。如果省略第二个值,则将第一个值分配给两个属性。
除Edge之外,所有主流浏览器均支持place-self属性。
参考摘录与: