CSS grid-row-start 语法
在 CSS 中，grid-row-start 属性用于定义网格子项在行方向上的起始位置。它定义了网格子项开始于哪一条水平的网格线。
语法：
grid-row-start: 取值;说明：
grid-row-start 的取值可以是以下几种情况。
整数值：表示网格线的序号。- 正整数：从网格的起始边缘开始计数。例如，1 表示第一条网格线，2 表示第二条网格线。
- 负整数：从网格的结束边缘开始计数。例如，-1 表示最后一条网格线。
name：如果你在 grid-template-rows 或 grid-template 中定义了具名网格线，可以使用这些名称来指定起始线。例如，grid-row-start: header-start;。span <integer>：表示网格子项从其自动放置的位置开始，向上（或向左，取决于 grid-auto-flow）跨越指定数量的行轨道。span <name>：表示网格子项从其自动放置的位置开始，跨越到指定具名网格线之前。
对于 grid-row-start 属性，小伙伴们要清楚以下几点。
- grid-row-start 通常与 grid-row-end 属性结合使用，共同确定子项所占据的行区域。
- 当只设置 grid-row-start 而不设置 grid-row-end 时，子项默认只占据一个行轨道，除非其内容需要更多空间（如果行轨道允许伸展）。
注意: grid-row-start 属性只能用于网格容器的子项，即作为 display 取值为 grid 或 inline-grid 元素的子元素。
CSS grid-row-start 摘要
| 属于 | CSS grid 布局 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 否 |
| 默认值 | auto |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS grid-row-start 示例
接下来，我们通过几个简单的例子来讲解一下 CSS grid-row-start 属性是如何使用的。
示例 1：grid-row-start 使用数字定义起始行线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
/* 定义 3×3 的网格 */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
width: 300px;
height: 300px;
background-color: lightskyblue;
}
.container > div {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid silver;
background-color: salmon;
}
.item-1 {
grid-row-start: 1; /* 从第 1 行线开始 */
}
.item-2 {
grid-row-start: 2; /* 从第 2 行线开始 */
}
.item-3 {
grid-row-start: 3; /* 从第 3 行线开始 */
}
.item-4 {
grid-row-start: -2; /* 从倒数第 2 行线开始 */
}
/* item-5、item-6 未设置 grid-row-start，将自动放置在下一个可用行 */
</style>
</head>
<body>
<div class="container">
<div class="item-1">item 1</div>
<div class="item-2">item 2</div>
<div class="item-3">item 3</div>
<div class="item-4">item 4</div>
<div class="item-5">item 5</div>
<div class="item-6">item 6</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在上面例子中，我们定义了一个 3x3 的网格容器，因此有 4 条水平网格线（1, 2, 3, 4）。
- 对于 item-1 来说，grid-row-start: 1; 表示将其放置在第 1 行。
- 对于 item-2 来说，grid-row-start: 2; 表示将其放置在第 2 行。
- 对于 item-3 来说，grid-row-start: 3; 表示将其放置在第 3 行。
- 对于 item-4 来说，grid-row-start: -2; 中的负数索引 -2 表示从倒数第 2 条行线开始。由于网格有 4 条行线（编号 1, 2, 3, 4），倒数第 2 条行线是第 3 条行线（4-2=2+1=3）。因此，item-4 实际上也从第 3 行开始。
- 由于 item-5 和 item-6 未设置 grid-row-start，因此它们将遵循网格的自动放置规则，填充剩余的可用单元格。
示例 2：grid-row-start 与 grid-row-end 结合使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
/* 定义 4×4 的网格 */
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
width: 400px;
height: 400px;
background-color: lightskyblue;
}
.container > div {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid silver;
background-color: salmon;
}
.item-1 {
grid-row-start: 1;
grid-row-end: 3; /* 从第 1 行线开始，到第 3 行线结束（跨越 2 行） */
}
.item-2 {
grid-row-start: 2;
grid-row-end: span 2; /* 从第 2 行线开始，向下跨越 2 行 */
}
.item-3 {
grid-row-start: 1;
grid-row-end: span 4; /* 从第 1 行线开始，向下跨越 4 行（填满整个高度） */
grid-column-start: 3; /* 同时指定列，使其在右侧 */
}
/* item-4、item-5、item-6 将自动放置 */
</style>
</head>
<body>
<div class="container">
<div class="item-1">item 1 (跨 2 行)</div>
<div class="item-2">item 2 (跨 2 行)</div>
<div class="item-3">item 3 (跨 4 行)</div>
<div class="item-4">item 4</div>
<div class="item-5">item 5</div>
<div class="item-6">item 6</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在上面例子中，我们定义了一个 4 列 4 行的网格容器。其中，将 grid-row-start 与 grid-row-end 配合，从而使得子项可以跨越多行。
- 对于 item-1 来说，grid-row-start: 1; grid-row-end: 3; 表示将其放置在第 1 行和第 2 行，从第 1 行线开始到第 3 行线结束。
- 对于 item-2 来说，grid-row-start: 2; grid-row-end: span 2; 表示将其放置在第 2 行和第 3 行。它从第 2 行线开始，并向下跨越 2 行。
- 对于 item-3 来说，grid-row-start: 1; grid-row-end: span 4; 表示将其从第 1 行线开始，向下跨越 4 行，占据了整个网格高度。
