CSS 年鉴 → 属性 → G → grid-auto-columns

grid-auto-columns

Avatar of Mojtaba Seyedi
Mojtaba Seyedi 于

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

grid-auto-columns CSS 属性是 CSS 网格布局规范 的一部分，用于指定未设置显式大小的网格列的大小。换句话说，此属性设置 隐式列 和在 grid-template-columns 属性中未显式设置大小的任何其他列的大小。

.grid-container {
  display: grid;
  grid-template-areas: "media detail detail";
  grid-template-columns: 200px 400px;
  grid-auto-columns: 150px;
}

此示例创建一个网格容器，其中包含由 grid-template-areas 定义的三列。前两列通过 grid-template-columns 设置了显式大小，但最后一列没有。这就是 grid-auto-columns 发挥作用并将其大小设置为 150px 的地方。

grid-auto-columns 使用案例

如上所述，grid-auto-columns 设置任何未设置显式大小的列的大小。现在的问题是，哪些列没有设置显式大小？或者，网格如何创建没有显式大小的列？

以下是一些可能出现这种情况的情况。

由 grid-template-areas 定义且未由 grid-template-columns 设置显式大小的列

第一种情况是我们本文开头看到的。网格可以具有由 grid-template-areas 定义的显式列，而无需通过 grid-template-columns 属性显式设置其大小。

.grid-container {
  display: grid;
  grid-template-areas: "media detail detail"; /* 3 columns */
  grid-template-columns: 200px 150px; /* 2 sizes */
}

第一列设置为 200px，第二列的大小设置为 150px。由于最后一列未设置为任何显式大小，因此它将设置为 auto 并占用其他两列剩余的可用空间。

Three column tracks that two of them have an explicit size but not the last one is set to auto.

如果我们将 grid-auto-columns 添加到上面的示例中，我们也可以控制最后一列的大小。

.grid-container {
  display: grid;
  grid-template-areas: "media detail detail";
  grid-template-columns: 200px 150px;
  grid-auto-columns: 150px;
}

现在，正如您在下图中看到的，最后一列的大小设置为 150px。

三列轨道，最后一列的大小使用 grid-auto-columns 属性设置为 150px。

请注意，未设置显式大小的轨道是 auto 大小。

网格项目数量多于单元格时会创建隐式列

由 grid-template-columns、grid-template-rows 或/和 grid-template-areas 定义的网格称为**显式网格**，这意味着所有网格轨道都具有设置的大小。例如，假设我们在父网格容器中具有 12 个 HTML 子元素，并且在网格中显式定义了三列和四行。

.grid {
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-template-columns: repeat(3, auto);
}

由于没有大小信息，因此我们有这些列和行的隐式网格轨道。只有列数和行数。

您将在网格项目数量多于已定义列数时遇到隐式列。想象一下，在我们最后一个示例中，我们现在有超过 12 个 HTML 元素。我们之前设置了三列和四行，因此网格中正好有 12 个单元格——这与我们的 12 个元素完美匹配。但是，如果元素超过 12 个，我们就会突然出现溢出问题，对吧？

一点也不！CSS 网格的 自动放置算法 会创建额外的行或列以容纳多余的项目。这些额外的列和行称为**隐式轨道**。

默认情况下，自动放置算法会创建行轨道以容纳多余的项目。在以下示例中，我们要求我们的网格按列（而不是行）排列多余的项目，因此我们需要将自动放置算法设置为 column。太棒了，现在我们的网格能够容纳所有内容，无论我们向其中添加多少项目。

但是，隐式列的大小会根据剩余的空间自动确定。这就是 grid-auto-columns 非常有用的原因——我们可以为所有这些列指定大小，并且 CSS 网格将在到达最后一个元素时停止填充列，即使网格的最后一行中的最后一列未达到网格的全部宽度。

假设我们将这些隐式网格列的大小设置为 250px。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-auto-flow: column; /* Set the auto-placement algorithm to column */
  grid-auto-columns: 250px;
}

现在，无论创建多少个隐式列，它们的大小都将设置为 250px。

Single row grid with five columns with grid-auto-columns setting implicit columns.
显式网格用实线标记，隐式网格用虚线标记。

将项目定位在显式网格外时会创建隐式列

当我们把项目放置在显式网格外时会创建隐式轨道，grid-auto-columns 属性在这种情况下也派上用场。会自动创建隐式轨道来为该项目腾出空间。

.grid-container {
  display: grid;
  grid-template-columns: 150px 150px 150px; /* 3 explicit columns */
  grid-auto-columns: 150px; /* Size of the implicit columns */
}

.grid-item:last-child {
  grid-column: 5; /* Placed in 5th column in a 3-column grid */
  grid-row: 3;
}

我们在那里所做的是将最后一个 .grid-item 子元素设置在第五列……但是我们的三列网格中没有第五列！这将最后一个网格项目置于显式网格外，从而创建两个隐式列轨道。即使这些列是为我们创建的，我们也可以使用 grid-auto-columns 属性将其设置为 150px。

Five by three grid where the cell in the last row and last column contains the last grid item.
将最后一个子元素定位到三列显式网格的第五列会导致两个隐式列轨道。我们使用 grid-auto-columns 属性将这些列的大小设置为 150px。

语法

grid-auto-columns: <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-columns 属性为网格轨道指定多个列大小。在这种情况下，多个轨道大小充当模式，并在必要时重复。

.grid-container {
  display: grid;
  grid-template-columns: 150px 150px;
  grid-auto-columns: 50px 100px 200px;
}

.grid-item:last-child {
  grid-column: 8;
}

在这里，我们将网格的最后一个子元素移出显式列，并且我们的网格创建隐式列以容纳该项目。此网格有两个显式列（150px 150px），并且由于最后一个项目希望位于第八列（grid-column: 8），因此网格中自动生成了六个隐式列。

grid-auto-columns 将第一个隐式列的大小设置为 50px，第二个设置为 100px，第三列设置为 200px。由于我们有多于三列的隐式列，因此我们的网格会重复此模式来设置其大小。

A grid with a multiple column sizes set by the grid-auto-columns property. The multiple values get repeated as the size of the implicit columns.

如果我们还有另一列隐式列，那么该列的大小是多少？

显示答案！

它将是 150px，但我敢肯定，您在不查看的情况下也知道这一点。😀

值

grid-auto-columns 属性的值与 grid-template-columns 属性的值几乎相同，除了在 grid-auto-columns 中不能使用以下值：

  • none
  • [linename]
  • repeat()
  • subgrid
  • masonry
/* Keyword values */
grid-auto-columns: auto;
grid-auto-columns: min-content;
grid-auto-columns: max-content;

/* single track-size values */
grid-auto-columns: 200px;
grid-auto-columns: 30vmin;
grid-auto-columns: 50%;
grid-auto-columns: 1.5fr;
grid-auto-columns: minmax(100px, 2fr);
grid-auto-columns: minmax(min-content, 1fr);
grid-auto-columns: fit-content(15rem);

/* multiple track-size values */
grid-auto-columns: 100px 1fr;
grid-auto-columns: 200px min-content 1fr;
grid-auto-columns: 100px 200px 50px 10%;
grid-auto-columns: minmax(100px, auto) auto max-content fit-content(200px);

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

<length>

此值可以是任何有效的非负 CSS 长度，例如 px、em 和 rem 等，用于指定列的轨道大小（即宽度）。

<percentage>

这是一个相对于网格容器内部内联尺寸的非负值。如果网格容器的大小取决于其轨道的尺寸，则百分比必须与声明 auto 相同对待。

使用百分比值的一个缺点是，如果在轨道之间添加 间隙，则间隙的大小将添加到轨道的尺寸中，这 可能会导致溢出。使用 fr 单位 或 auto 关键字来设置轨道大小，以防止这种情况发生。

<flex>

这是一个以 fr 单位 表示的非负值，它允许你通过将轨道的尺寸指定为网格容器中可用空间的一部分来创建灵活的网格轨道。这样，随着网格宽度的变化，列也会随之变化，从而使网格更具响应性。

例如，考虑一个 900px 宽的网格容器，它有三个隐式列。假设第一列（左侧）的宽度是固定的（即它不会改变），为 300px，而第二列占用一个分数单位（1fr），第三列占用两个分数单位（2fr）。

.grid-container {
  display: grid;
  width: 900px;
  grid-auto-columns: 300px 1fr 2fr;
}

后两列是分数的，因此它们将占用任何剩余的可用空间。在这种情况下，可用空间是在第一列的固定 300px 宽度被考虑在内后剩下的空间。然后，后两列根据它们获得的分数来分配剩余的空间。

在这个例子中，剩余的可用空间是 600px（即 900px 减去 300px）。第二列获得该空间的一个分数（1fr），第三列获得两个分数（2fr）。让我们来算一下 600px 的一个分数是多少。

1fr = ([Grid Container Width] - [Fixed Column Width]) / [Sum of the flex factors]
1fr = (900px - 300px) / 3
1fr = 600px / 3
1fr = 200px

啊哈！一个分数是 200px。由于第二列是 1fr，因此它也必须是 200px。这留给我们 400px 的可用空间（即 900px – 300px – 200px），这恰好是第二列大小的两倍。而第二列大小的两倍是 2fr（1fr(2)）！

minmax(min, max)

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

以下是一个例子：

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

这里有两列：一列宽 200px，另一列表示为 minmax(100px, 400px)。看起来很奇怪，对吧？但这只是说第二列必须占用至少 100px 的空间，但不能超过第一列 200px 宽度被考虑在内后可用空间的两倍。

更清楚地说：只要可用空间大于 100px，则第二列可以扩展到 400px，但必须在此停止。否则，列宽为 100px。

min 和 max 参数接受所有以下值，但 min 值不能是 flex 值（例如 1fr）。

<length-percentage> | <flex> | min-content | max-content | auto

因此，这无效，因为 min 值是 flex 值。

grid-auto-columns: minmax(1fr, 500px) 3fr;

但这些是完全有效的。

grid-auto-columns: minmax(auto, 1fr) 3fr;
grid-auto-columns: minmax(200%, 1fr) 1fr;

auto

在大多数情况下，auto 关键字的行为类似于 minmax(min-content, max-content)。

由于 auto 轨道尺寸可以通过 align-content 和 justify-content 属性进行拉伸，因此它们默认情况下将占用网格容器中任何剩余的空间（你知道，auto-matically）。也就是说，auto 轨道尺寸在分配剩余空间时无法战胜 fr 单位——它们会调整到其内容的最大尺寸。

看看这两个轨道示例的结果。

grid-auto-columns: auto auto auto;
grid-auto-columns: auto 1fr auto;

当所有三列都设置为 auto 时（我们也可以将其写成 repeat(3, auto)——但稍后会详细介绍），它们所做的只是共享相等的空间。但是，当我们在中间插入一个分数单位作为第二列时，auto 列的宽度仅与其内部内容一样宽，而 1fr 列则占用剩余的空间。

Demonstrating the behavior of fr unit next to auto tracks

min-content

min-content 关键字表示元素在网格容器中不溢出内容的情况下可能占用的最小空间量。内容可以是文本、图像或视频。

假设内容是“CSS is awesome.”，则 min-content 是单词“awesome”的宽度，因为它是内容中最宽的部分（比“CSS”和“is”组合起来更宽）。如果列变得更窄，则文本将开始溢出容器。

在代码中，它看起来像这样：

.grid {
  display: grid;
  grid-auto-columns: min-content 1fr;
  gap: 1rem;
}

…这将产生类似于以下的结果：

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-columns: max-content 1fr;
  gap: 1rem;
}
Demonstrating the behavior of the max-content keyword in a grid layout

fit-content(<length-percentage>)

fit-content() 函数（在我们的 CSS 函数指南中有一个 详细的解释）使用可用空间以及接受 percentage 或 length 值作为网格轨道允许的最大尺寸，同时确保轨道永远不会超过 max-content 并且永远不会缩小到最小值以下。最小值通常（但并非总是）等于 min-content。

.grid {
  display: grid;
  grid-auto-columns: fit-content(700px) fit-content(700px) 1fr;
  gap: 1rem;
}

在下图中，第一列不会扩展到超过其 max-content 尺寸（即单词“fit-content(700px)”在一行上的宽度）——它只扩展到适合其内容。然而，第二列的内容多得多，并且在达到 700px 的宽度后停止扩展，这是函数设置的限制。

Showing fit-content behavior in a CSS grid.
所以，对于前两列，我们这里的意思是它们应该与最大内容一样宽，但最多不超过700px。如果它可以在此限制内容纳所有内容，那就太好了，在max-content处停止。否则，显示尽可能多的内容，最多700px，然后开始换行。

示例

让我们创建一个包含三张图片的三列图库，如果添加更多图片，我们希望它们级联到新的一行和一列。为此，我们需要创建三列显式列并将额外项目放置在这三列之外，因为这会导致隐式列，并且假设我们不知道将生成多少列，我们可以使用grid-auto-columns属性控制这些隐式列的大小。

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  grid-auto-columns: minmax(100px, 200px);
  gap: 1rem;
}
A gallery created by CSS Grid that has three explicit columns and three implicit ones.
我们使用grid-auto-columns将隐式列的大小设置为minmax(100px, 200px)。

规范

CSS 网格布局模块 1（候选推荐）

浏览器支持

更多信息

嘘！ 创建一个DigitalOcean账户并获得200美元免费额度用于基于云的托管和服务。
此评论线程已关闭。如果您有重要信息需要分享，请联系我们。

© 2024 . All rights reserved.