DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!
grid-auto-rows
CSS 属性是 CSS 网格布局规范 的一部分,用于指定在没有显式大小的情况下创建的网格 rows
的大小。 换句话说,此属性设置 隐式行 的大小以及在 grid-template-rows
属性中未明确设置大小的任何其他行的大小。
.grid-container {
display: grid;
grid-template-areas: "media detail detail"
"media detail detail";
grid-template-rows: 200px;
grid-auto-rows: 150px;
}
该示例创建了一个网格容器,其中包含由 grid-template-areas
定义的两行。 第一行由 grid-template-rows
设置了显式大小,但第二行没有。 这就是 grid-auto-rows
发挥作用并将其大小设置为 150px
的地方。
grid-auto-rows
用例
如上所述,grid-auto-rows
设置任何没有显式大小的行的大小。 现在问题是,什么类型的行没有显式大小? 或者,网格如何创建没有显式大小的行?
以下是一些可能出现这种情况的情况。
grid-template-areas
定义的行,这些行没有由 grid-template-rows
设置显式大小
由 第一个案例是我们在这篇文章开头看到的。 网格可以有一个由 grid-template-areas
定义的显式行,而没有由 grid-template-rows
属性明确设置其大小。
.grid-container {
display: grid;
grid-template-areas: "media detail detail"
"media detail detail"; /* 2 rows */
grid-template-rows: 200px; /* 1 size */
}
第一行设置为 200px
,由于最后一行没有设置为任何显式大小,因此它将设置为 auto
。 在此示例中,第二行没有任何内容,因此 auto
等于零大小。

如果我们将 grid-auto-rows
添加到上面的示例中,我们也可以控制最后一行的大小
.grid-container {
display: grid;
grid-template-areas: "media detail detail"
"media detail detail";
grid-template-rows: 200px;
grid-auto-rows: 150px;
}
/* Make sure grid items expand to the second row */
.grid-items {
grid-row: 1/3;
}
现在,正如您在下面的图像中看到的,最后一行的大小设置为 150px

请注意,没有显式大小的轨道是 auto
大小。
当网格项目多于单元格时会创建隐式行
由 grid-template-columns
、grid-template-rows
或/和 grid-template-areas
定义的网格称为**显式网格**,这意味着所有网格轨道都具有设置的大小。 例如,假设我们在父网格容器中有六个 HTML 子元素,并且在网格中明确定义了三列和两行。
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
}
由于没有大小信息,我们对这些列和行具有隐式网格轨道。 只有列数和行数。
当网格项目多于定义的行时,您会发现隐式行的一种情况。 想象一下,在我们的最后一个示例中,我们现在有超过 6 个 HTML 元素。 我们之前设置了三列和两行,所以网格中正好有 6 个单元格——正好满足我们的 6 个元素。 但是,如果超过 6 个元素,我们突然就出现溢出问题,对吧?
完全不是! CSS 网格的 自动放置算法 会创建额外的行或列来容纳额外的项目。 这些额外的列和行称为**隐式轨道**。
默认情况下,自动放置算法会创建行轨道来容纳额外的项目,因此我们的网格能够容纳所有项目,无论我们投入多少项目。
但是,隐式行的尺寸会根据其内容自动调整。 这就是 grid-auto-rows
非常有用的原因——我们可以为所有这些行设置一个大小,CSS 网格将在达到最后一个元素时停止填充行。
假设我们将这些隐式网格行的大小设置为 150px
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
grid-auto-rows: 150px;
}
现在,无论创建了多少隐式行,它们的大小都将设置为 150px
。

当我们将项目放置在显式网格之外时,会创建隐式行
grid-auto-rows
属性派上用场的另一种情况是,当我们将项目放置在显式网格之外时,会创建隐式轨道。 隐式轨道会自动创建以为此项目腾出空间。
.grid-container {
display: grid;
grid-template-columns: 150px 150px 150px; /* 3 explicit columns */
grid-template-rows: 150px; /* 1 explicit row */
grid-auto-rows: 150px; /* Size of the implicit rows */
}
.grid-item:last-child {
grid-column: 5;
grid-row: 3; /* Placed in 3rd row in a 1-row grid */
}
我们在那里所做的就是设置第三行中最后一个.grid-item
子元素... 但是我们的单行网格中并没有第三行!这将最后一个网格项置于显式网格之外,从而创建了两个隐式行轨道。尽管这些行是为我们创建的,但我们可以使用grid-auto-rows
属性将它们设置为150px
。

grid-auto-rows
属性将这些行的尺寸设置为150px
。语法
grid-auto-rows: <track-size>+
完整定义
where
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
where
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto <inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
where
<length-percentage> = <length> | <percentage>
- 初始值:
auto
- 应用于:网格容器
- 继承:否
- 计算值:按指定,但相对长度转换为绝对长度
- 百分比:参考内容区域的相应维度
- 动画类型:如果列表长度匹配,则按计算轨道列表中每个项目的计算值类型;否则为离散的
多个轨道尺寸
我们可以使用grid-auto-rows
属性为网格轨道指定多个行尺寸。在这种情况下,多个轨道尺寸作为模式工作,并在必要时重复。
.grid-container {
display: grid;
grid-template-rows: 50px 50px;
grid-auto-rows: 40px 60px 80px;
}
.grid-item:last-child {
grid-row: 8;
}
在这里,我们将网格的最后一个子元素移出显式行,我们的网格创建隐式行来容纳该项。此网格有两行显式行(50px 50px
),由于最后一个项希望位于第八行(grid-row: 8
),因此网格中自动生成了六行隐式行。
grid-auto-rows
将第一行隐式行尺寸设置为40px
,第二行设置为60px
,第三行设置为80px
。由于我们有超过三行隐式行,因此我们的网格会重复此模式来设置它们的大小。

grid-auto-rows
属性设置多个行尺寸的网格。多个值将重复作为隐式行的尺寸。如果我们再有一行隐式行,那行的尺寸是多少?
给我看看答案!
正确,它将是 40 像素高!
值
grid-auto-rows
的值与grid-template-rows属性的值几乎相同,除了在grid-auto-rows
中你不能使用以下值
none
[linename]
repeat()
subgrid
masonry
/* Keyword values */
grid-auto-rows: auto;
grid-auto-rows: min-content;
grid-auto-rows: max-content;
/* single track-size values */
grid-auto-rows: 200px;
grid-auto-rows: 30vmin;
grid-auto-rows: 50%;
grid-auto-rows: 1.5fr;
grid-auto-rows: minmax(100px, 2fr);
grid-auto-rows: minmax(min-content, 1fr);
grid-auto-rows: fit-content(15rem);
/* multiple track-size values */
grid-auto-rows: 100px 1fr;
grid-auto-rows: 200px min-content 1fr;
grid-auto-rows: 100px 200px 50px 10%;
grid-auto-rows: minmax(100px, auto) auto max-content fit-content(200px);
/* Global values */
grid-auto-rows: inherit;
grid-auto-rows: initial; /* same as `auto` */
grid-auto-rows: revert;
grid-auto-rows: revert-layer;
grid-auto-rows: unset;
<length>
此值可以是任何有效的非负 CSS 长度,例如px
、em
和rem
等,用于指定行的大小(即高度)。
<percentage>
这是一个相对于网格容器内联尺寸的非负值。如果网格容器的大小取决于其轨道的尺寸,则百分比必须与声明auto
相同。
使用百分比值的一个缺点是,如果你在轨道之间添加间隙,间隙的大小将被添加到轨道的大小中,这可能会导致溢出。使用fr
单位或auto
关键字来设置轨道的尺寸并防止这种情况发生。
<flex>
这是一个以fr
单位表示的非负值,它允许你通过将轨道的大小指定为网格容器中可用空间的一部分来创建灵活的网格轨道。这样,当网格改变高度时,行也会随之改变,从而使网格更具响应性。
例如,考虑一个高度为900px
的网格容器,它有三个隐式行。假设第一行(顶部)的高度是固定的(即它不会改变)为300px
,而第二行占用一个分数单位(1fr
),第三行占用两个分数单位(2fr
)。
.grid {
display: grid;
height: 900px;
grid-auto-rows: 300px 1fr 2fr;
}
第二行和第三行是分数的,因此它们将占用任何剩余的可用空间。在这种情况下,可用空间是在第一行固定300px
高度被考虑后剩下的空间。之后,第二行和第三行根据它们获得的分数单位数量来分配剩余的空间。
在这个例子中,剩余的可用空间是600px
(即900px
减去300px
)。第二行获得该空间的一个分数单位(1fr
),第三行获得两个分数单位(2fr
)。让我们做一下数学计算,以确定600px
的一个分数单位的高度
1fr = ([Grid Container Height] - [Fixed Row Height]) / [Sum of the flex factors]
1fr = (900px - 300px) / 3
1fr = 600px / 3
1fr = 200px
啊哈!一个分数单位是200px
。由于第二行是1fr
,因此它也必须是200px
。这留给我们400px
的可用空间(900px
– 300px
– 200px
),这恰好是第二行尺寸的两倍。
minmax(min, max)
minmax()
函数接受两个参数:最小长度值和最大长度值。它告诉网格容器 grid-auto-rows
的高度不能 *超过* 最小值,也不能 *小于* 最大值。 我们的 CSS 函数指南对该函数的工作原理进行了更全面、更详细的解释。
以下是一个示例
grid-auto-rows: 200px minmax(100px, 400px);
这里有两行:一行高度为 200px
,另一行表示为 minmax(100px, 400px)
。看起来很奇怪,对吧?但它的意思是第二行 *必须* 占用至少 100px
的空间,但不能超过 400px
。
更清晰地说:只要可用空间超过 100px
,第二行就可以扩展到 400px
,但必须在那里停止。否则,该行的高度为 100px
。
min
和 max
参数接受以下所有值,但 min
值不能是 flex 值(例如 1fr
)
<length-percentage> | <flex> | min-content | max-content | auto
因此,由于 min
值是 flex 值,因此以下代码无效
/* 👎 */
grid-auto-rows: minmax(1fr, 500px) 3fr;
但以下代码完全有效
/* 👍 */
grid-auto-rows: minmax(auto, 1fr) 3fr;
grid-auto-rows: minmax(200%, 1fr) 1fr;
auto
在大多数情况下,auto
关键字的行为类似于 minmax(min-content,
max-content)
。
由于 auto
轨道尺寸可以被 align-content
和 justify-content
属性拉伸,因此它们默认情况下会 *自动* 占用网格容器中剩余的任何空间。也就是说,auto
轨道尺寸无法战胜 fr
单位,在分配剩余空间时会调整为其内容的最大尺寸。
看看以下两个轨道示例的结果
grid-auto-rows: auto auto auto;
grid-auto-rows: auto 1fr auto;
当所有三行都设置为 auto
时,它们只是平均共享空间。但是,当我们在中间插入一个分数单位作为第二行时,auto
行的高度仅与其内部的内容一样高,而 1fr
行则占据剩余空间。

min-content
min-content
关键字表示元素在网格容器中不溢出其内容的情况下可能占用的 *最小* 空间。内容可以是文本、图像或视频。
假设内容是“CSS is awesome.” 以垂直模式写入,min-content
是“awesome”一词的宽度,因为它是内容中最长的部分(比“CSS”和“is”更长)。如果该行缩短,文本将开始溢出容器。
在代码中,它看起来像这样
.grid {
display: grid;
grid-auto-rows: min-content 1fr;
gap: 1rem;
}
.grid-item {
writing-mode: vertical-rl;
}
……这将导致类似于以下结果

max-content
max-content
关键字表示元素 *所需* 的最小尺寸,以便在不换行或溢出的情况下容纳所有内容。包含“max”的名称听起来像是我们在处理最大尺寸,因此该值可能有点令人费解。
如果我们重新访问上面的 min-content
示例,具有 max-content
尺寸值的网格轨道将增长,直到其内容可以容纳在一行中。因此,在“CSS is awesome”的情况下,max-content
是这三个词在一行中占用的空间。
.grid {
display: grid;
grid-auto-rows: max-content 1fr;
gap: 1rem;
}

fit-content(<length-percentage>)
fit-content()
函数(在我们的 CSS 函数指南中有一个 完整的解释)使用可用的空间,并接受一个 percentage
或 length
值作为网格轨道允许的最大尺寸,**同时确保轨道永远不会超过** **max-content**
**,并且永远不会缩小到最小尺寸以下。** 最小尺寸通常(但并非总是)等于 min-content
。
.grid {
display: grid;
grid-auto-rows: fit-content(400px) fit-content(400px) 1fr;
gap: 1rem;
}
在下图中,第一行不会扩展到超过其 max-content
尺寸(即单词“fit-content(400px)”在一行中的宽度)——它只会扩展以适应其内容。然而,第二行有更多内容,并且在达到 400px
的高度时停止扩展,这是函数设定的限制。

400px
。如果它可以在该限制内容纳所有内容,那就很好,在 max-content
处停止。否则,尽可能多地显示内容,直到 400px
,然后开始换行。示例
让我们创建一个包含未知数量项目的画廊,这些项目在行中自动重复,而且由于我们不知道将有多少个项目,因此无法知道需要多少行,因此也无法明确设置行的大小。
grid-auto-rows
属性在这里派上用场,它可以设置画廊中自动生成的行的尺寸。
我们希望行具有 150px
和 200px
大小的重复模式
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-auto-rows: 150px 200px;
gap: 1rem;
}

在以下演示中,您可以添加更多项目,并查看 grid-auto-rows
的效果
浏览器支持
更多信息
CSS 网格布局指南
明确网格和隐式网格之间的区别
关于 CSS 网格的更多有趣事实
了解 grid-template 和 grid-auto 之间的区别
与 IE10 兼容的网格自动放置与 Flexbox
CSS 网格中的自动调整列大小: `auto-fill` 与 `auto-fit`
瞧,不用媒体查询!使用 CSS 网格的响应式布局
相关
display
.element { display: inline-block; }
gap
.element { gap: 20px 30px; }
grid-auto-columns
.element { grid-auto-columns: minmax(100px, 200px); }
grid-template
.element { grid-template: 100px 1fr / 300px 1fr; }
grid-template-areas
.element { grid-template-areas: "header header" "sidebar main"; }
grid-template-columns
.element { grid-template-columns: 300px 1fr; }
grid-template-rows
.element { grid-template-rows: minmax(auto, 1fr) 3fr; }