网格自动放置属性

最后更新：2026-09-13

grid-auto-flow 网格自动放置属性

grid-auto-flow 用于控制网格中未显式定位的网格项的自动排列方式。它决定了网格项是按行填充还是按列填充，以及是否启用稠密填充模式来填补布局中的空隙。该属性对网格的整体排列顺序有直接影响。

分类
初始值	row
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

grid-auto-flow: row | column | row dense | column dense;

⚙️ 取值

值	类型	描述
`row \| column \| row dense \| column dense`	关键字	自动放置方向与稠密填充

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
grid-auto-flow	✓ v57	✓ v16	✓ v52	✓ v10.1	✓ v44
所有主流浏览器均支持

提示： row 表示按行优先填充（默认值），column 表示按列优先填充。

提示： dense 关键字启用稠密填充，会让后续小项自动填补前面大项留下的空隙，但可能改变视觉顺序。

❓ 常见问题

Q什么时候应该使用 dense 模式？

A当网格项尺寸不一致、自动放置后留下空隙时用 dense，它让后面的小项回头填补前面的空洞，最大化利用空间。但 dense 会让视觉顺序偏离 DOM 顺序，屏幕阅读器与键盘导航仍按 DOM 顺序，可能造成阅读跳变，对可访问性敏感的场景要慎用。

Qgrid-auto-flow: column 效果是什么样的？

A网格项先沿列方向向下填满第一列，再移到下一列继续填充，与默认的按行填充方向垂直。适合竖排阅读、时间线等按列组织的场景。也可写作 grid-auto-flow: column dense，在列填充模式下同样启用稠密填补。

Q如何用 CSS Grid 实现瀑布流（masonry）布局？

A常用方案是 grid-auto-flow: row dense + 给不同高度的卡片设 grid-row: span 2 / span 3，配合 grid-auto-rows 统一行高，dense 回头填补空洞。但 dense 会打乱视觉与 DOM 顺序、影响可访问性；要求严格保序用 column-count 更简单。