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;
}
您可以在以下图像中看到结果

如您所见,默认情况下,网格按与 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;
}

无障碍问题
使用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 网格布局指南
网格密集关键字的自动流动功能
grid-auto-flow:CSS 网格 :: flex-direction:Flexbox
使用 CSS Grid 实现类似 Flexbox 的“简单地将元素排列成一行”
使用 Grid Shepherd 技术通过 CSS 对数据进行排序
Grid、内容重新排序和可访问性
相关
display
.element { display: inline-block; }
grid-auto-columns
.element { grid-auto-columns: minmax(100px, 200px); }
grid-auto-rows
.element { grid-auto-rows: minmax(1fr, 500px) 3fr; }
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; }