CSS grid-row 语法
在 CSS 中，grid-row 属性是一个复合（简写）属性，它用于同时设置 grid-row-start 和 grid-row-end 这两个属性。
语法：
grid-row: start;
grid-row: start / end;说明：
grid-row 属性可以接受 1 个值或 2 个值，值与值之间使用 “/” 隔开。start 代表的是 grid-row-start 的取值，end 代表的是 grid-row-end 的取值。
如果 grid-row 是单个值，该值会被解释为 grid-row-start 的值，然后 grid-row-end 使用默认值 auto。比如 grid-row: 2; 等价于：
grid-row-start: 2;
grid-row-end: auto;如果 grid-row 是两个值，此时第一个值会被解释为 grid-row-start 的值，而第二个值会被解释为 grid-row-end 的值。然后这两个值可以是：
整数值：表示网格线的序号（正数从起始边缘计数，负数从结束边缘计数）。<name>：如果在 grid-template-rows 或 grid-template 中定义了具名网格线，可以使用这些名称。span <integer>：表示子项从其起始点开始，向下跨越指定数量的行轨道。span <name>：表示子项从其起始点开始，跨越到指定具名网格线。
比如，grid-row: 1 / 3; 等价于：
grid-row-start: 1;
grid-row-end: 3;再比如，grid-row: 2 / span 2; 等价于：
grid-row-start: 2;
grid-row-end: span 2;对于 grid-row 属性，小伙伴们还要清楚以下几点。
- grid-row 是 grid-area 简写属性的组成部分之一。如果你已经使用了 grid-template-areas，通常会直接用 grid-area: <name>; 来放置子项，这样更具可读性。然而，当需要精确控制子项在特定行线之间的位置或跨度时，grid-row 仍然非常有用。
- 使用 grid-row 属性时，它会重置 grid-row-start 和 grid-row-end 的值。
注意: grid-row 属性只能用于网格容器的子项，即作为 display 取值为 grid 或 inline-grid 元素的子元素。
CSS grid-row 摘要
| 属于 | CSS grid 布局 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 否 |
| 默认值 | auto / auto |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS grid-row 示例
接下来，我们通过一个简单的例子来讲解一下 CSS grid-row 属性是如何使用的。
示例 1：grid-row 取值为 1 个值
<!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: 1; /* 从第 1 行线开始，默认跨越 1 行 */
}
.item-2 {
grid-row: 2; /* 从第 2 行线开始，默认跨越 1 行 */
}
.item-3 {
grid-row: 3; /* 从第 3 行线开始，默认跨越 1 行 */
}
.item-4 {
grid-column: 1; /* 放置在第一列 */
grid-row: -3; /* 从倒数第 3 条行线开始（实际为正数第 3 行）*/
}
/* item-5 未设置 grid-row，将自动放置 */
</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 class="item-7">item 7</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
当 grid-row 取值是一个值时，该值会作为 grid-row-start 的值。在这个例子中，我们定义了一个 3 × 3 的网格容器。
- 对于 item-1 来说，grid-row: 1; 表示将其放置在第 1 行。由于没有指定结束线，它默认跨越一个行轨道。
- 对于 item-2 来说，grid-row: 2; 表示将其放置在第 2 行。
- 对于 item-3 来说，grid-row: 3; 表示将其放置在第 3 行。
- 对于 item-4 来说，grid-row: -3; 将其放置在从底部数第 3 条网格线开始的位置，也就是正数第 3 行。
示例 2：grid-row 取值是 2 个值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
/* 定义 3 列 4 行的网格 */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
width: 300px;
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: 1 / 3; /* 从第 1 行线开始，到第 3 行线结束（跨越 2 行） */
}
.item-2 {
grid-row: 2 / 5; /* 从第 2 行线开始，到第 5 行线结束（跨越 3 行） */
}
.item-3 {
grid-column: 3; /* 放置在第三列 */
grid-row: 1 / -1; /* 从第 1 行线开始，到倒数第 1 条行线结束（跨越所有行） */
}
/* item-4、item-5 将自动放置 */
</style>
</head>
<body>
<div class="container">
<div class="item-1">item 1 (1 / 3)</div>
<div class="item-2">item 2 (2 / 5)</div>
<div class="item-3">item 3 (1 / -1)</div>
<div class="item-4">item 4</div>
<div class="item-5">item 5</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
当 grid-row 取值是 2 个值时，表示同时设置 grid-row-start 和 grid-row-end 的值。
- 对于 item-1 来说，grid-row: 1 / 3; 表示将其放置在第 1 行和第 2 行。
- 对于 item-2 来说，grid-row: 2 / 5; 表示将其放置在第 2、第 3 和第 4 行。
- 对于 item-3 来说，grid-row: 1 / -1; 表示将其放置在第 1 行到最后一行的所有行。
示例 3：grid-row 使用 span 关键字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
/* 定义 3 列 4 行的网格 */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
width: 300px;
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: 1 / span 2; /* 从第 1 行线开始，向下跨越 2 行 */
}
.item-2 {
grid-column: 2; /* 放置在第二列 */
grid-row: 2 / span 3; /* 从第 2 行线开始，向下跨越 3 行 */
}
.item-3 {
grid-column: 3; /* 放置在第三列 */
grid-row: 1 / 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>页面效果如下图所示。
分析：
grid-row 属性使用 span 关键字，我们可以非常方便地调整子项的尺寸。使用 span 关键字，我们无需计算结束网格线，只需指定子项需要跨越的行数，这使得代码更加直观。
- 对于 item-1 来说，grid-row: 1 / span 2; 表示其从第 1 行线开始，向下跨越 2 行。
- 对于 item-2 来说，grid-row: 2 / span 3; 表示其从第 2 行线开始，向下跨越 3 行。
- 对于 item-3 来说，grid-row: 1 / span 4; 表示其从第 1 行线开始，向下跨越 4 行，占据了整个网格高度。
