grid-row

Avatar of Mojtaba Seyedi
Mojtaba Seyedi

DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 200 美元免费积分!

grid-row CSS 属性是一个简写属性,它在一个声明中指定网格项目在网格布局中开始和结束的行网格线。

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.grid-item:nth-child(2) {
  grid-row: 2 / 4; /* Starts on the second row line and ends on the fourth row line */
}

由于 CSS 网格的默认自动放置行为,此示例中网格的第二个子元素通常会放置在网格第二列的第一行。 但我们声明了 grid-row 并将其设置为将网格项目的起始边缘与第二条网格线对齐,而其结束边缘与第四条网格线对齐,这会重新定位网格项目。

使用 CSS grid-row 属性设置第二个网格项目的位置和大小

组成属性

如前所述,grid-row 属性是一个简写属性,它组合了两个属性

语法

grid-row: <grid-line> [ / <grid-line> ]?
完整定义
<grid-line> =
  auto |
  <custom-ident> |
  [ [ <integer [−∞,−1]> | <integer [1,∞]> ] && <custom-ident>? ] |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]
  • 初始值:auto
  • 应用于:网格项目和绝对定位的框,其包含块是网格容器
  • 继承:
  • 计算值:与其长手属性指定的相同
  • 动画类型:离散

此属性可以取两个值,用正斜杠 (/) 分隔。 正斜杠之前的第一个值设置 grid-row-start 属性,而正斜杠之后的第二个值设置 grid-row-end 属性。 您可以声明一个不带正斜杠的单个值,该值将应用于 grid-row-start 属性,并将 grid-row-end 属性设置为 auto

/* Keyword value */
grid-row: auto;

/* <custom-ident> value */
grid-row: myLineName;
grid-row: myGridArea;
grid-row: header-start / main-end;

/* <integer> + <custom-ident> values */
grid-row: 3;
grid-row: 2 / -3;
grid-row: main 2;
grid-row: 3 line / 5 line;

/* span + <integer> + <custom-ident> values */
grid-row: span 3;
grid-row: span 2 / 5;
grid-row: 1 / span myline;
grid-row: 2 / span gridline 3;

/* Global values */
grid-row: inherit;
grid-row: initial; /* same as `auto` */
grid-row: revert;
grid-row: revert-layer;
grid-row: unset;

auto

这是默认值。 它指示默认跨度 (1) 和自动放置行为,这意味着网格项目会自动放置在下一个可用的空网格单元格中。

<custom-ident>

此语法允许您使用整数来引用编号的网格线,或使用字符串来引用 命名网格线命名网格 区域。 换句话说,您可以通过其数字索引名称来指定网格线,以确定网格项目的起始边缘和结束边缘。

通过行号定位项目

每个网格轨道之前和之后都有两条网格线,它们会自动分配数字索引,从数字 1 开始。

A three by three grid of numbered rectangles. The third cell in the third row is blank.
此图仅显示列网格轨道的索引

在本文的第一个示例中,我们使用此语法通过其索引 (2) 来引用第二条网格线,这将网格项目的起始边缘与第二行的起始边缘对齐,而其结束边缘使用 <custom-ident> 语法与第四行对齐

.grid-item:nth-child(2) {
  grid-row: 2 / 4;
}

请注意,您也可以使用负数来引用网格线,但它是从网格的结束边缘开始计数。 以下代码指向上一示例中的相同网格线,但反向计数

.grid-item:nth-child(2) {
  grid-row: -3 / -1;

  /* same as: */
  grid-row: 2 / 4;
  grid-row: 2 / -1;
  grid-row: -3 / 4;
}

请注意,负整数以及正整数都已分配给我们的网格

使用 CSS grid-row 属性将第二个网格项目放置到第二行和第三行中
通过行名定位项目

您可以使用 grid-template-columnsgrid-template-rows 基于行的网格放置属性,将自定义名称分配给网格线,以便通过其名称来引用该线。

让我们回到我们的示例,并为其所有行轨道线命名,如下面的声明所示

.grid {
  display: grid;
  grid-template-rows: [first] 100px [second] 100px [third] 100px [last];  
  grid-template-columns: 1fr 1fr 1fr;
}

我们可以通过我们的自定义名称来引用第二行和第四行,而不是通过它们的索引

.grid-item:nth-child(2) {
  grid-row: second / last; /* same as index numbers 2 / 4 */
}

请注意,<custom-ident> 不能取 span 值。 span 是网格放置属性的保留关键字(例如 grid-row: 1 / span 2)。

通过网格区域定位项目

使用 grid-template-areas 属性定义网格区域时,您可以免费获得 隐式行名,它们基于区域的名称。 例如,名为 content 的网格区域会在其之前生成一条名为 content-start 的线,并在其之后生成一条名为 content-end 的线。 您可以引用这些线来设置网格项目的位置。

.grid-item:nth-child(2) {
  grid-row: content-start / content-end;
}

或者,您可以引用区域的名称,以将项目定位到名为 content 的区域的起始线和结束线上

.grid-item:nth-child(2) {
  grid-row: content;
}

以下是一个完整的示例

<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>
body {
  display: grid;
  grid-template-rows: min-content 1fr min-content;   
  grid-template-areas:
    "header"
    "content"
    "footer";
}

main {
  grid-row: content;
}

这会将 <main> 元素的位置设置为我们网格中的 content 区域。

<integer> && <custom-ident>?

这种语法风格允许您在有重复名称时,通过网格线来定位网格项。如果存在具有相同名称的网格线,此语法有助于指定您要引用的是哪条线。

.grid {
  display: grid;
  grid-template-rows: [bar] 100px [foo] 100px [bar] 150px [bar];
}

假设您要选择第三条线,但是该线与第一条线和最后一条网格线具有相同的名称 - 它们都被称为bar。由于名为bar第二条线是第三条网格线,因此可以使用2将其选择为起点。

.grid-item:nth-child(2) {
  grid-row: 2 bar; /* The second `bar` named line which is the third line */

  /* This is equivalent to */
  grid-row-start: 2 bar;  
  grid-row-end: auto;  
}
A single column grid wuth three rows. The second row is green and has swapped places with the third row.

请注意,顺序无关紧要,因此之前的代码也可以这样编写。

.grid-item:nth-child(2) {
  grid-row: bar 2;
}

与之前的语法类似,您也可以使用负整数从网格的末端边缘开始计算网格线。在我们的示例中,如果要引用第一个bar,可以从网格的末端边缘开始计算,并这样写。

.grid-item:nth-child(2) {
  grid-row: -3 bar;
}

请注意,整数值不能为零。

span && [ <integer> || <custom-ident> ]

此语法允许网格项跨越网格轨道。它可以通过三种不同的方式指定。

请注意,如果在此语法中的任何位置都没有指定整数,则默认值为1

span <integer>

使用span关键字后跟一个整数表示网格项从特定网格线跨越的轨道数。例如,如果要使网格项向其末端边缘跨越三个行轨道,可以应用以下值。

.grid-item:nth-child(2) {
  grid-row: 1 / span 3;
}
A three by four grid of rectangles. The first three rows in the second column are selected.
网格项使用 CSS grid-row 属性跨越三行。
span <custom-ident>

也可以将span关键字与网格线的名称组合使用,使网格项扩展到它到达指定的网格线为止。

.grid-item:nth-child(3) {
  grid-row: 3 / span lastline;
}

由于网格项的起始线已知(3),因此可以跨越该项,直到它到达名为lastline的网格线为止。

A three by five grid with the last three rows in the first column selected.
网格项跨越网格,直到它到达名为lastline的指定网格线为止,使用 CSS grid-row 属性。
span <custom-ident> <integer>

如果指定的网格线名称被分配给多个网格线 - 换句话说,如果我们有重复的命名网格线 - 我们需要说明要定位的是哪些。为此,可以在值中添加一个整数,指定要引用的网格线。

以下面的网格为例。

.grid-container {
  display: grid;
  grid-template-rows: [y] 50px [x] 50px [x] 50px [y] 50px [x] 50px [x];
  grid-template-columns: 1fr 1fr;
}

.grid-item:nth-child(2) {
  grid-row: 2 / span x 2; /* equivalent to grid-row-end: 5; */
}

将网格项的起始线设置为第二条线。然后希望它向前跨越,直到它到达名为x的网格线为止。由于希望它成为第二个x网格线,最终得到span x 2

结果,网格项从第二条线跨越,如下图所示。它遇到的第一个线是第一个x,然后是y,最后它遇到了所需的第二个名为x的线。

A two by five grid. The middle three rows in the first column are selected.
使用 CSS grid-row 属性,将网格项的位置从第二条线设置为第二个名为x的线。

当您想要使用其名称将网格项跨越到网格线时,此语法非常有用。但是您知道使用此方法有多个具有相同名称的网格线,因此添加一个整数来说明您想要的是该网格线的第N个。

有关这些单个属性语法的更多信息和示例,请参阅 grid-row-startgrid-row-end

示例

让我们看一下grid-row可以使用的几种不同场景。

浮动条形图

我们中的许多人通常将 CSS 网格视为创建网页或应用程序主要结构和布局的工具,但 CSS 网格的功能远不止这些。

以下面的图表为例。仔细观察,你会发现每个条形图都从某一行跨越到另一行,以显示应该在图表中标记的范围。

A bar chart with bars that span single columns and various numbers of rows, like a calendar weekly view.
演示带有跨越行的条形图的浮动条形图。

如果您将图表视为一个网格,那么您可以看到如何使用 CSS 网格定位属性轻松指定条形图的大小和位置。

A bar chart with bars that span single columns and various numbers of rows, like a calendar weekly view. The grid lines are shown.
一个网格,在它的列中包含条形图,它们的位置使用 CSS grid-row 属性设置。

要为该图表建立一个网格,可以编写以下代码。

.chart {
  display: grid;
  grid-template-columns: repeat(10, 40px);
  grid-template-rows: repeat(9, 40px);
  gap: 0 8px;
}

现在,我们需要将所有条形图放置在正确的行和列中。

.bar:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / 3;
}

.bar:nth-child(2) {
  grid-column: 2;
  grid-row: 5 / 10;
}

/* ... */

.bar:nth-child(10) {
  grid-column: 10;
  grid-row: 9 / 10;
}

查看演示,看看它的其他部分是如何组合在一起的。

堆叠网格项

在跨网格定位项目时,可以将它们堆叠或重叠在一起。这使我们能够有时将 CSS 网格用作绝对定位的替代方案。例如,我们可以在图像之上放置一个标题层,而无需使用position属性,如下所示。

<figure>
  <img src="image.png" alt="how dare you leave alt empty?">
  <figcaption>The caption of our image</figcaption>
</figure>
figure {
  display: grid;
}

img,
figcaption {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

以下是我们得到的結果。

Cabin in the woods with a green to blue gradient overlay and the words the caption of our image on top.

默认情况下,网格项按源顺序堆叠,但可以使用z-index属性控制其级别。在以下示例中,我们重叠了一些项目,并且使用z-index属性将第二个项目提升到堆叠上下文中的最高级别。

.item:nth-child(2) {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  z-index: 1;
}
Four overlapping grid items in a five-by-five grid.
使用 CSS z-index 属性将第二个网格项提升到堆栈顶部。

可访问性

使用网格定位属性时需要注意的一点是,重新排列项目会导致的问题。当您更改项目的顺序时,只有网格项目的视觉顺序会改变,并且该顺序可能与原始文档顺序不同。这可能会给使用键盘在文档中进行选项卡操作或收听按与 HTML 相同顺序读取内容的屏幕阅读器的用户带来非常糟糕的体验。

因此,当元素的 HTML 顺序很重要时,请避免更改网格项的顺序。例如,这可能对随机图像库来说很好,但对您的表单输入来说可能不太好。

但是,在撰写本文时,有一个提案来解决这个问题,希望将来能解决这个问题。

演示

您可以在演示中更改网格定位属性的值,以查看对第三个网格项的影响。

浏览器支持

更多信息