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
并将其设置为将网格项目的起始边缘与第二条网格线对齐,而其结束边缘与第四条网格线对齐,这会重新定位网格项目。

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 开始。

在本文的第一个示例中,我们使用此语法通过其索引 (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;
}
请注意,负整数以及正整数都已分配给我们的网格

grid-row
属性将第二个网格项目放置到第二行和第三行中通过行名定位项目
您可以使用 grid-template-columns
和 grid-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;
}

请注意,顺序无关紧要,因此之前的代码也可以这样编写。
.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;
}

grid-row
属性跨越三行。span <custom-ident>
也可以将span
关键字与网格线的名称组合使用,使网格项扩展到它到达指定的网格线为止。
.grid-item:nth-child(3) {
grid-row: 3 / span lastline;
}
由于网格项的起始线已知(3
),因此可以跨越该项,直到它到达名为lastline
的网格线为止。

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
的线。

grid-row
属性,将网格项的位置从第二条线设置为第二个名为x
的线。当您想要使用其名称将网格项跨越到网格线时,此语法非常有用。但是您知道使用此方法有多个具有相同名称的网格线,因此添加一个整数来说明您想要的是该网格线的第N
个。
有关这些单个属性语法的更多信息和示例,请参阅 grid-row-start
和 grid-row-end
。
示例
让我们看一下grid-row
可以使用的几种不同场景。
浮动条形图
我们中的许多人通常将 CSS 网格视为创建网页或应用程序主要结构和布局的工具,但 CSS 网格的功能远不止这些。
以下面的图表为例。仔细观察,你会发现每个条形图都从某一行跨越到另一行,以显示应该在图表中标记的范围。

如果您将图表视为一个网格,那么您可以看到如何使用 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;
}
以下是我们得到的結果。

默认情况下,网格项按源顺序堆叠,但可以使用z-index
属性控制其级别。在以下示例中,我们重叠了一些项目,并且使用z-index
属性将第二个项目提升到堆叠上下文中的最高级别。
.item:nth-child(2) {
grid-column: 2 / 4;
grid-row: 2 / 4;
z-index: 1;
}

z-index
属性将第二个网格项提升到堆栈顶部。可访问性
使用网格定位属性时需要注意的一点是,重新排列项目会导致的问题。当您更改项目的顺序时,只有网格项目的视觉顺序会改变,并且该顺序可能与原始文档顺序不同。这可能会给使用键盘在文档中进行选项卡操作或收听按与 HTML 相同顺序读取内容的屏幕阅读器的用户带来非常糟糕的体验。
因此,当元素的 HTML 顺序很重要时,请避免更改网格项的顺序。例如,这可能对随机图像库来说很好,但对您的表单输入来说可能不太好。
但是,在撰写本文时,有一个提案来解决这个问题,希望将来能解决这个问题。
演示
您可以在演示中更改网格定位属性的值,以查看对第三个网格项的影响。
浏览器支持
更多信息
- CSS 网格布局模块级别 1 (W3C)
- CSS 网格布局:简介 (DigitalOcean)
- CSS 网格中的定位、跨越和密度 (DigitalOcean)
相关指南
相关
display
.element { display: inline-block; }
grid-auto-flow
.element { grid-auto-flow: dense; }
grid-auto-rows
.element { grid-auto-rows: minmax(1fr, 500px) 3fr; }
grid-column
.element { grid-column: 3 / 5; }
gap
.element { gap: 20px 30px; }
grid-row-end
.element { grid-row-end: 3; }
grid-row-start
.element { grid-row-start: 2; }
grid-template-areas
.element { grid-template-areas: "header header" "sidebar main"; }
grid-template-rows
.element { grid-template-rows: minmax(auto, 1fr) 3fr; }
row-gap
.element { row-gap: 2rem; }