CSS grid-row 属性

CSS grid-row 属性是CSS网格布局中的一种属性，它控制网格元素所在的行范围。

语法

grid-row: <start-line> / <end-line> | <start-line> / span <row-span> | <grid-line> | span <row-span>;

• start-line：规定网格元素的起始行。
• end-line：规定网格元素的结束行。
• row-span：规定网格元素要跨越的行数。
• grid-line：规定网格元素所在的行。

属性值

start-line 和 end-line

在网格布局中，可以使用 start-line 和 end-line 来定义一个网格元素所在网格中的行范围。以下是一些示例：

.item {
  grid-row: 1 / 3; /* 元素位于第1行至第3行 */
}

.item {
  grid-row: 2 / span 3; /* 元素位于第2行，并且要跨越3行 */
}

row-span

row-span 属性用来为一个网格元素指定它要跨越的行数。例如：

.item {
  grid-row: span 2; /* 元素要跨越2行 */
}

grid-line

在网格布局中，每条水平的网格线和每条垂直的网格线都可以被标记为一个网格线。这些网格线可以用来定义网格元素的位置。如果您只想在一个网格线上定义一个网格元素，则可以使用以下方式：

.item {
  grid-row: 2; /* 元素位于第2行 */
}

实例

以下是一些使用 grid-row 属性的示例：

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
}

.item1 {
  grid-row: 1 / 3;
}

.item2 {
  grid-row: 1 / 3;
}

.item3 {
  grid-row: 2 / 4;
}

.item4 {
  grid-row: span 2;
}

在上面的示例中，我们创建了一个三行三列的网格布局，并在其内部放置了四个网格元素。其中，.item1 和 .item2 跨越了第一和第二行，.item3 跨越了第二和第三行，而 .item4 则跨越了第三和第四行。

总结

CSS grid-row 属性是CSS网格布局中的一种属性，它控制网格元素所在的行范围。可以使用 start-line 和 end-line 来定义一个网格元素所在网格中的行范围，使用 row-span 属性来指定一个网格元素要跨越的行数，使用 grid-line 来为网格元素指定它所在的行。