网格布局中 grid-column-start, grid-column-end 和 grid-row-start, grid-row-end

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
}