grid-auto-flow

Avatar of Mojtaba Seyedi
Mojtaba Seyedi

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

grid-auto-flow CSS 属性是 CSS 网格布局规范 的一部分,它允许我们控制当网格项目没有通过任何网格放置属性显式定位时自动放置的网格项目的流向。

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 50px);
  grid-auto-flow: dense;
}

该示例创建了一个网格容器,该容器可以容纳每行八个项目,并用随后出现的较小项目填充任何剩余的可用空间,这些较小项目可以适应该空间。

演示 grid-auto-flow: dense 在网格布局中的效果。

语法

grid-auto-flow: [ row | column ] || dense
  • 初始值:row
  • 应用于:网格容器
  • 继承:
  • 计算值:指定值
  • 动画类型:离散

/* Keyword values */
grid-auto-flow: column;
grid-auto-flow: row;
grid-auto-flow: dense;
grid-auto-flow: column dense;
grid-auto-flow: row dense; /* same as `dense` */


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

row

这是默认值。一旦指定,项目将按水平方向排列。网格的自动放置算法将通过填充每一行来放置网格项目,并且仅在需要时创建新行。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
  grid-auto-rows: 50px;
}

此示例显示,网格项目在同一行中彼此相邻放置,并且一旦当前行没有空间,网格就会自动添加新行以放置其余的网格项目。

自动放置算法的默认行为是通过填充每一行并在需要时创建新行来放置网格项目。

column

网格项目将按列垂直排列。自动放置算法将通过填充每一列并在需要时创建其他列来放置网格项目。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
  grid-template-rows: 50px 50px 50px;
  grid-auto-flow: column;
}

如以下图像所示,在此示例中,网格将项目放置在列中,并且一旦没有剩余单元格,它就会自动移动到新列,直到没有更多网格项目。

grid-auto-flow 属性设置为column使自动放置算法通过填充每一列并在必要时创建新列来放置网格项目。

在上面的示例中,通过grid-template-rows显式定义了三行。现在让我们看另一个没有指定行的示例,并且grid-auto-flow设置为column

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 50px);
  grid-auto-flow: column;
}

这里我们只定义了五列,但由于我们将自动放置设置为column,它会生成其他列以放置其余的网格项目,这可能会导致溢出。

演示 grid-auto-flow: column 如何将项目彼此相邻放置。没有指定其他行,这会导致网格超出其容器。

请注意,这些其他列称为隐式列,我们可以使用grid-auto-columns属性控制其大小。

dense

如果指定,则自动放置算法会尝试用较小的项目填充网格中的可用空间,即使它们在标记中是乱序的。

为了更好地理解dense关键字值,让我们以一个 8×8 的 50px 正方形网格为例

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 50px);
  grid-template-rows: repeat(8, 50px);
}

然后我们扩展其中一些的大小

.grid-item:is(:nth-child(3), :nth-child(5), :nth-child(8), :nth-child(12), :nth-child(17) {
  grid-column: span 3;
  grid-row: span 2;
}

您可以在以下图像中看到结果

An 8-by-8 grid that contains 31 items inside with a few of them expanded.
网格具有自动放置的默认值,这导致网格项目之间出现一些空隙。

如您所见,默认情况下,网格按与 HTML 顺序相同的顺序布局项目。当遇到无法容纳项目的空格时,它会跳过该空格,在我们的布局中留下“空洞”。

dense关键字通过允许网格以某种方式忽略 HTML 来改变此行为,当它找到适合某个空洞的项目时,它将获取该项目——无论它是否在 HTML 中紧随其后——并将其放置到该空洞中。

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 50px);
  grid-template-rows: repeat(8, 50px);
  grid-auto-flow: dense;
}
dense关键字使自动放置算法重新排序项目以回填布局中的空洞。

看看第六个网格项目,现在它已移动以填充它可以容纳的第一个空洞。

因此,默认情况下,网格向前推进,从不回头检查是否可以将项目放入先前的空空间。但是当我们声明dense时,算法会尝试填充尽可能多的空洞,而不管源顺序如何。

row dense

由于row是默认值,使用row dense与使用dense相同,效果也一样。

column dense

网格项目将按列布局,同时填充空隙。

如果我们在前面的示例中将grid-auto-flow属性的值更改为column dense,我们将得到以下结果

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 50px);
  grid-template-rows: repeat(8, 50px);
  grid-auto-flow: column dense;
}
Using column dense value lays out items by column while filling holes.

无障碍问题

使用grid-auto-flow属性时需要注意的一件事是dense算法引起的问题。

dense关键字仅更改网格项目的视觉顺序,并且该顺序可能与原始文档顺序不同,这可能会导致在键盘上通过文档选项卡或使用屏幕阅读器(以与HTML相同的顺序读取内容)的人员体验非常糟糕。

因此,当元素的HTML顺序很重要时,请避免使用dense关键字值。例如,它可能适用于随机图片库,但可能不适用于您的表单输入。

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

演示

使用CSS Grid创建画廊变得非常愉快,您可以添加grid-auto-flow使其更加出色

.gallery {
  display: grid;
  grid-template-columns: repeat(8, 8vw);
  grid-template-rows: repeat(8, 8vw);
  grid-auto-flow: dense;
  gap: 1rem;
}

.item:is(:nth-child(2), :nth-child(4), :nth-child(6)) {
  grid-column: span 2;
  grid-row: span 2;
}

您可以更改grid-auto-flow属性的值以查看其对画廊的影响

浏览器支持

规范

CSS 网格布局模块级别 2

更多信息