grid-column-start, grid-column-end 和 grid-row-start, grid-row-end
通过指定特定网格线(grid lines) 来确定 网格项(grid item) 在网格中的位置和大小。 grid-column-start / grid-row-start
是网格项开始的网格线,grid-column-end / grid-row-end
是网格项结束的网格线。
值:
- < line >:如果是数字则表示网格线的编号,如果是名称则表示网格线的名称
- span < number >:网格项将跨越的网格轨道数量
- span < name>:网格项将跨越到指定的名称位置
- auto:表示自动放置,自动跨度,默认会跨一个网格轨道的宽度或者高度
CSS 代码:
.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
}
[< integer >&&< custom-ident >?] 可以是网格线的数值索引,也可以是命名的网格线。
css代码1:
.item-a {
grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start
grid-row-end: 3;
}
对于重复命名的网格线,需要指定是第几个名称(从1开始计数),比如:
.a {
grid-column-start: 1 bar;
grid-column-end: 3 foo;
}
.b {
grid-column-start: 1 bar;
}
.c {
grid-column-start: -1 foo;
}
[ span && [ < positive-integer > || < custom-ident > ] ] 指定网格项的跨度,此值与指定的网格线一起将确定网格项的位置。
网格项相对指定的网格线将跨越N个轨道数:
.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-start
+ grid-column-end
和 grid-row-start
+ grid-row-end
的简写形式。
CSS 代码:
.item {
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}
其实也就是 起始网格线 / 结束网格线 或者 起始网格线 / 跨度值
示例:
.item-c {
grid-column: 3 / span 2;
grid-row: third-line / 4;
}
如果没有声明分隔线结束位置,则该网格项默认占据 1 个网格轨道。
grid-area
为网格项提供一个名称,以便对 网格容器 grid-template-areas
属性所创建的模板 进行引用。也可以用作grid-row-start
+ grid-column-start
+ grid-row-end
+ grid-column-end
的简写。
值:
- < name >:网格项的名称,是 网格容器
grid-template-areas
属性所创建的模板中的引用名称 - < row-start > / < column-start > / < row-end > / < column-end >:数字或分隔线名称
.item {
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}
示例:作为网格项名称的一种方法
.item-d {
grid-area: header
}
作为grid-row-start
+ grid-column-start
+ grid-row-end
+ grid-column-end
属性的简写形式:
.item-d {
grid-area: 1 / col4-start / last-line / 6
}