CSS grid-row-end 语法
在 CSS 中，grid-row-end 属性用于指定网格子项在行方向上的结束位置。它定义了网格子项结束于哪一条水平的网格线。
语法：
grid-row-end: 取值;说明：
grid-row-end 的取值可以是以下几种情况。
整数值：表示网格线的序号。- 正整数：从网格的起始边缘开始计数。例如，3 表示第三条网格线，表示子项将在第二行结束后结束。
- 负整数：从网格的结束边缘开始计数。例如，-1 表示最后一条网格线。
name：如果你在 grid-template-rows 或 grid-template 中定义了具名网格线，可以使用这些名称来指定结束线。例如，grid-row-end: footer-start;。span <integer>：表示网格子项从其起始位置开始，向下跨越指定数量的行轨道。span <name>：表示网格子项从其起始位置开始，跨越到指定具名网格线。
对于 grid-row-end 属性，小伙伴们要清楚以下几点。
- grid-row-end 通常与 grid-row-start 属性结合使用，共同确定子项所占据的行区域。
- 当只设置 grid-row-end 而不设置 grid-row-start 时，子项会根据其 grid-auto-flow 和其他子项自动放置，然后从自动确定的起始位置延伸到 grid-row-end 指定的结束线。
- 当 grid-row-end 值小于或等于 grid-row-start 值时，Grid 规范会自动将其调整到合适的位置（通常是 grid-row-start 值加上网格行数）。
注意: grid-row-end 属性只能用于网格容器子项，即作为 display 取值为 grid 或 inline-grid 元素的子元素。
CSS grid-row-end 摘要
| 属于 | CSS grid 布局 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 否 |
| 默认值 | auto |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS grid-row-end 示例
接下来，我们通过几个简单的例子来讲解一下 CSS grid-row-end 属性是如何使用的。
示例 1：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: 5; /* 从第 2 行线开始，到第 5 行线结束（占据 3 行） */
}
.item-3 {
grid-row-start: 1;
grid-column-start: 3; /* 定位到第三列 */
grid-row-end: -1; /* 从第 1 行线开始，到倒数第 1 条行线结束（占据所有行） */
}
/* .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 (跨 3 行)</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>页面效果如下图所示。
分析：
在上面例子中，我们定义了一个 4 列 4 行的网格容器，因此有 5 条水平网格线（1, 2, 3, 4, 5）。
- 对于 item-1 来说，grid-row-start: 1; grid-row-end: 3; 表示其从第 1 行线开始，到第 3 行线结束，因此占据了第 1 和第 2 行。
- 对于 item-2 来说，grid-row-start: 2; grid-row-end: 5; 表示其从第 2 行线开始，到第 5 行线结束，因此占据了第 2、第 3 和第 4 行。
- 对于 item-3 来说，grid-row-start: 1; grid-row-end: -1; 表示其从第 1 行线开始，到倒数第 1 条网格线（即第 5 条线）结束，从而占据了所有 4 行。
示例 2：grid-row-end 使用 span 关键字
<!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: span 2; /* 从第 1 行线开始，向下跨越 2 行 */
}
.item-2 {
grid-row-start: 2;
grid-column-start: 2;
grid-row-end: span 3; /* 从第 2 行线开始，向下跨越 3 行 */
}
.item-3 {
grid-row-start: 1;
grid-column-start: 3;
grid-row-end: span 4; /* 从第 1 行线开始，向下跨越 4 行 */
}
/* item-4、item-5 将自动放置 */
</style>
</head>
<body>
<div class="container">
<div class="item-1">item 1 (span 2)</div>
<div class="item-2">item 2 (span 3)</div>
<div class="item-3">item 3 (span 4)</div>
<div class="item-4">item 4</div>
<div class="item-5">item 5</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在上面例子中，我们定义了一个 4 列 4 行的网格容器。其中：
- 对于 item-1 来说，grid-row-end: span 2; 表示从其起始行线向下跨越 2 个行轨道。
- 对于 item-2 来说，grid-row-end: span 3; 表示从其起始行线向下跨越 3 个行轨道。
- 对于 item-3 来说，grid-row-end: span 4; 表示从其起始行线向下跨越 4 个行轨道，占据了整个网格的高度。
使用 span 关键字使得子项尺寸的定义更加直观和易于理解，尤其是在需要跨越多个轨道时。
