grid-auto-rows

Avatar of Mojtaba Seyedi
Mojtaba Seyedi

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 等于零大小。

A row that is 200 pixels tall that s split into three equal columns.
两条行轨道,其中一条具有显式大小,但第二条没有,它设置为 auto,这里等于零。 这就是为什么您在网格线 #2 和 #3 之间看不到任何空间。

如果我们将 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

Two row tracks. The first is 200 pixels tall and the second row is 150 pixels tall using the grid-auto-rows property.

请注意,没有显式大小的轨道是 auto 大小。

当网格项目多于单元格时会创建隐式行

grid-template-columnsgrid-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

A three-by-four grid of columns and rows, each numbered.
显式网格用实线标记,隐式网格用虚线标记。

当我们将项目放置在显式网格之外时,会创建隐式行

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 长度,例如pxemrem等,用于指定行的大小(即高度)。

<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的可用空间(900px300px200px),这恰好是第二行尺寸的两倍

minmax(min, max)

minmax() 函数接受两个参数:最小长度值和最大长度值。它告诉网格容器 grid-auto-rows 的高度不能 *超过* 最小值,也不能 *小于* 最大值。 我们的 CSS 函数指南对该函数的工作原理进行了更全面、更详细的解释

以下是一个示例

grid-auto-rows: 200px minmax(100px, 400px);

这里有两行:一行高度为 200px,另一行表示为 minmax(100px, 400px)。看起来很奇怪,对吧?但它的意思是第二行 *必须* 占用至少 100px 的空间,但不能超过 400px

更清晰地说:只要可用空间超过 100px,第二行就可以扩展到 400px,但必须在那里停止。否则,该行的高度为 100px

minmax 参数接受以下所有值,但 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-contentjustify-content 属性拉伸,因此它们默认情况下会 *自动* 占用网格容器中剩余的任何空间。也就是说,auto 轨道尺寸无法战胜 fr 单位,在分配剩余空间时会调整为其内容的最大尺寸。

看看以下两个轨道示例的结果

grid-auto-rows: auto auto auto;
grid-auto-rows: auto 1fr auto;

当所有三行都设置为 auto 时,它们只是平均共享空间。但是,当我们在中间插入一个分数单位作为第二行时,auto 行的高度仅与其内部的内容一样高,而 1fr 行则占据剩余空间。

Demonstrating the behavior of fractional units next to auto tracks.

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;
}

……这将导致类似于以下结果

Demonstrating the behavior of the min-content keyword in a grid layout

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;
}
Demonstrating the behavior of the max-content keyword in a grid layout

fit-content(<length-percentage>)

fit-content() 函数(在我们的 CSS 函数指南中有一个 完整的解释)使用可用的空间,并接受一个 percentagelength 值作为网格轨道允许的最大尺寸,**同时确保轨道永远不会超过** **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 属性在这里派上用场,它可以设置画廊中自动生成的行的尺寸。

我们希望行具有 150px200px 大小的重复模式

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 150px 200px;
  gap: 1rem;
}
A gallery created by CSS Grid that has auto generated implicit rows. We set the size of the implicit rows to the pattern of 150 pixels and 200 pixels using grid-auto-rows.

在以下演示中,您可以添加更多项目,并查看 grid-auto-rows 的效果

浏览器支持

更多信息