grid-auto-flow: dense 能提升网格布局空间利用率，通过回填空白区域使不规则项目排列更紧凑；适用于卡片、图库等场景，但可能打乱视觉顺序，影响可访问性，需谨慎用于对阅读顺序敏感的内容。
在使用 CSS Grid 布局时，grid-auto-flow: dense 是一个非常实用的属性值，它能帮助我们更高效地利用网格容器中的空白区域，提升整体布局的空间利用率。尤其是在处理不规则尺寸的网格项目时，这个特性显得尤为重要。
理解 grid-auto-flow 的工作方式
CSS Grid 会按照源顺序自动将未明确指定位置的项目放入网格中。默认情况下，grid-auto-flow: row 会让项目逐行填充，遇到空间不够就换行，但不会回头去填前面留下的空隙。
当你设置 grid-auto-flow: dense 后，Grid 算法会尝试“回填”之前因项目跨度大而留下的空白区域，只要后续项目的尺寸合适，就会被塞进这些缝隙中。
如何提升空间利用率
启用 dense 模式后，布局引擎会更积极地寻找可用空间。这特别适合用于卡片式布局、图库或仪表盘等场景，其中项目大小不一，容易产生视觉上的“空洞”。
立即学习“前端免费学习笔记（深入）”；
例如：- 你有一个 12 列的网格容器
- 第一个项目设置为 span 2 行 3 列
- 第二个项目 span 1 行 2 列，原本会排在第一行末尾
- 如果第一行右侧有足够空间放下它，即使它在 DOM 中靠后，dense 模式也会把它提前放置
这样就能避免出现明显的白色空隙，让整体看起来更紧凑、整齐。
使用 dense 的注意事项
虽然 dense 能优化视觉布局，但也可能打乱 DOM 顺序和视觉顺序的一致性，影响可访问性和屏幕阅读器的体验。
- 不要在对阅读顺序敏感的内容中使用（如段落、表单）
- 确保所有项目在视觉上是独立模块，顺序不影响理解
- 配合
grid-template-rows和minmax()使用效果更佳，比如设置行高自适应
实际应用示例
以下是一个简单的 CSS 示例：
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
grid-auto-flow: dense;
}
.item-large {
grid-column: span 2;
grid-row: span 2;
}
在这个布局中，任何尺寸合适的后续小项目都会被自动填充到大项目留下的空位中，实现更紧密的排列。
基本上就这些。合理使用 grid-auto-flow: dense 可以显著减少页面空白，让网格布局更灵活高效，但要注意内容语义和用户体验的平衡。
