在电商首屏的商品卡片流式布局中，一个常见问题是：当某些卡片需要占据两列宽度时，网格中会出现空洞，后续卡片被推到下一行，导致页面看起来稀疏且不整齐。许多开发者直觉地认为，只要让后续的小卡片“回填”到空洞中，就能让布局更紧凑。CSS Grid 的 dense 关键字正是为此设计的，但它并非简单地“填补空洞”，而是会改变项目的放置顺序，进而影响视觉顺序和可访问性。本文将以商品卡片流式布局为贯穿场景，剖析 dense 的自动布局算法，并给出何时使用它的决策建议。
自动布局算法：稀疏与密集的差异
CSS Grid 的自动布局算法负责将未显式指定位置的网格项放入网格中。其核心流程是：按文档顺序依次处理每个项目，为每个项目找到一个合适的网格单元。grid-auto-flow 属性控制这一过程的方向和填充策略，其取值包括 row、column、row dense、column dense。默认值为 row，即按行填充，必要时增加新行。
当省略 dense 时，算法采用“稀疏”策略：它只会向前移动，即始终在当前行或后续行中寻找放置位置，绝不会回退到之前的行去填补空洞。这保证了所有自动放置的项目在视觉上保持文档顺序，但代价是可能留下空洞。例如，一个两列网格中，第一个项目占两列（grid-column: span 2），第二个项目占一列，那么第二个项目会被放到第二行第一列，第一行第二列就留下一个空洞。
当指定 dense 时，算法采用“密集”策略：它会尝试用后续的小项目填补这些空洞。在上述例子中，第二个项目会被回填到第一行第二列，从而消除空洞，但项目顺序被打乱——第二个项目在视觉上出现在第一行，而第三个项目可能被放到第二行。MDN 文档明确指出，dense 可能导致项目“看起来乱序”，而稀疏算法则保证“所有自动放置的项目按顺序出现”。
贯穿场景：商品卡片流式布局
假设一个移动端商品列表页，使用 CSS Grid 布局，每行两列。部分商品卡片因包含促销标签或大图而需要横跨两列（grid-column: span 2），其余卡片为标准单列。在稀疏模式下，当一个大卡片占据整行后，后续的单列卡片会被推到下一行，导致上一行的另一列出现空洞。页面看起来像是有缺失的卡片，用户可能会误以为加载失败。
改用 row dense 后，后续的单列卡片会回填到这些空洞中，使得每一行都被填满，视觉上更加紧凑。但此时，卡片的视觉顺序与文档顺序不再一致：某个在文档中靠后的商品可能出现在靠前的位置。对于商品列表，这可能会影响用户对商品顺序的预期，尤其是在有排序逻辑（如按销量、价格）的场景下。
算法细节：放置规则与空洞形成
要理解 dense 的行为，需要深入自动布局算法的具体步骤。规范将放置过程分为两个阶段：先放置有明确行列位置的项目，再放置自动定位的项目。对于自动定位的项目，算法维护一个“光标”位置，表示当前搜索的起点。
在稀疏模式下，光标只会向后移动，因此一旦跳过某个空洞，后续项目不会回头填充。在密集模式下，每次放置新项目时，算法会从网格的起点重新扫描，寻找第一个能容纳该项目的空洞。这意味着，如果后续项目尺寸较小，它可以被放入之前因大项目而留下的空洞中。
空洞的形成通常源于项目跨越多个轨道（span）或显式指定了行列位置。例如，一个项目设置了 grid-column: 2，而另一个项目设置了 grid-column: 1 / span 2，那么第一行第二列可能被空出。在稀疏模式下，这个空洞会保留；在密集模式下，后续的单列项目可以填充它。
视觉顺序与可访问性影响
dense 改变项目顺序，直接影响视觉顺序，进而影响可访问性。屏幕阅读器通常按照 DOM 顺序读取内容，而视觉顺序由网格布局决定。当 dense 导致视觉顺序与 DOM 顺序不一致时，依赖屏幕阅读器的用户会听到与视觉顺序不同的内容流，造成困惑。
例如，在商品列表中，视觉上第一个出现的商品可能在 DOM 中是第二个，屏幕阅读器会先读出第二个商品的信息，再读出第一个，这与用户看到的不一致。WCAG 2.1 的成功标准 1.3.2（有意义的序列）要求内容的阅读顺序应与视觉顺序一致，除非有明确的替代机制。因此，在内容顺序有语义含义的场景（如文章、表单）中，应避免使用 dense。
此外，键盘导航的焦点顺序也基于 DOM 顺序，视觉顺序的错乱可能导致焦点跳转与视觉位置不符，影响键盘用户的体验。
何时使用 dense：决策建议
dense 并非在所有场景都适用。以下决策建议基于上述分析：
- 适合使用 dense 的场景：视觉上无严格顺序要求的布局，如照片墙、图标网格、标签云等。这些场景中，项目的顺序对用户理解内容不重要，紧凑性优先。
- 不适合使用 dense 的场景：内容有逻辑顺序（如文章段落、表单字段、按时间排序的新闻列表）或需要保持视觉顺序与 DOM 顺序一致的场景。
- 需要权衡的场景：商品列表通常有排序，但用户可能更关心紧凑性。此时需评估：如果商品顺序是用户可感知的（如按价格排序），则应避免
dense；如果顺序只是默认的，且用户不关心，则可以使用。
与替代方案的比较
除了 dense，还有其他方法可以处理空洞问题：
- 使用
grid-template-columns配合repeat和auto-fill：可以自动调整列数，但无法解决单个项目跨列导致的空洞。 - 使用 Flexbox：Flexbox 的
flex-wrap可以将项目换行，但无法实现类似 Grid 的二维对齐，且跨列行为更难控制。 - 使用 JavaScript 动态计算位置：可以完全控制布局，但会增加脚本开销，且需要监听容器尺寸变化。
dense 的优势在于纯 CSS 实现，无额外性能成本，且布局算法由浏览器优化。其劣势是顺序错乱可能带来可访问性问题。
可观测信号与调试
在生产环境中，如果使用 dense，应通过以下信号监控其影响：
- 视觉顺序检查：使用浏览器开发者工具检查网格布局，确认项目顺序是否符合预期。
- 屏幕阅读器测试：使用 NVDA 或 VoiceOver 等工具，听取内容顺序，确保与视觉顺序一致。
- 焦点顺序测试：使用 Tab 键遍历页面，确认焦点移动顺序与视觉位置相符。
如果发现顺序错乱导致用户困惑，应考虑移除 dense 或调整 DOM 顺序。
浏览器支持与版本边界
grid-auto-flow 属性自 2017 年 10 月起在主流浏览器中广泛支持，属于“基线广泛可用”特性。但 dense 关键字的行为在不同浏览器中可能略有差异，尤其是在处理极端情况（如项目重叠）时。建议在目标浏览器中进行测试。
总结与边界
dense 是 CSS Grid 自动布局算法中的一个强大工具，它通过允许项目回填空洞来提升布局紧凑性，但代价是可能改变视觉顺序。在商品卡片流式布局中，它能让页面更整齐，但必须权衡可访问性影响。决策时应优先考虑内容顺序的语义，而非单纯的视觉美观。
以下流程图展示了稀疏与密集模式下项目放置的差异，以及决策路径：
flowchart TD
A[开始布局] --> B{项目是否显式定位?}
B -- 是 --> C[按指定位置放置]
B -- 否 --> D{grid-auto-flow 是否含 dense?}
D -- 否 --> E[稀疏模式: 光标只向前移动]
D -- 是 --> F[密集模式: 从网格起点扫描空洞]
E --> G[放置项目, 可能留下空洞]
F --> H[回填空洞, 可能改变顺序]
C --> I[继续下一个项目]
G --> I
H --> I
I --> J{还有项目?}
J -- 是 --> B
J -- 否 --> K[完成]
对比表格：稀疏与密集模式
| 特性 | 稀疏模式（默认） | 密集模式（dense） |
|---|---|---|
| 放置策略 | 光标只向前移动，不回填空洞 | 从起点扫描，回填空洞 |
| 视觉顺序 | 与 DOM 顺序一致 | 可能改变顺序 |
| 空洞情况 | 可能留下空洞 | 尽量填充空洞 |
| 适用场景 | 内容有顺序要求的布局 | 无顺序要求的紧凑布局 |
| 可访问性 | 较好，顺序一致 | 可能造成屏幕阅读器顺序错乱 |
| 性能 | 无额外开销 | 无额外开销 |
工程实现与调试建议
在实际项目中，若决定使用 dense，建议采用以下工程实践：
- 在布局容器上设置
grid-auto-flow: row dense，并确保网格列定义合理，避免过度跨列导致大量空洞。 - 使用 CSS 自定义属性控制
dense的开关，便于在不同场景下切换。 - 结合
@media查询，在窄屏或宽屏下调整dense策略，因为空洞的产生与列数相关。 - 在开发阶段使用浏览器开发者工具的“网格叠加”功能，可视化空洞和项目位置，便于调试。
常见失败模式与规避
使用 dense 时可能遇到以下问题：
- 项目重叠：如果项目显式设置了行列位置，且与自动放置的项目冲突，
dense可能导致重叠。此时应检查显式定位的项目是否与自动放置区域重叠。 - 顺序错乱导致用户困惑：在商品列表中，如果用户按价格排序，但视觉顺序被打乱，用户可能认为排序错误。规避方法是仅在无排序或默认排序时使用
dense。 - 屏幕阅读器顺序混乱：如前所述，可通过设置
aria-flowto属性或调整 DOM 顺序来缓解，但最佳方案是避免在语义内容中使用dense。
结论
dense 是 CSS Grid 自动布局算法中一个精细的选项，它通过改变项目放置顺序来消除空洞，提升布局紧凑性。然而，这种顺序改变可能破坏视觉顺序与 DOM 顺序的一致性，影响可访问性。在商品卡片流式布局等场景中，开发者应权衡紧凑性与内容顺序的语义，谨慎使用 dense。通过理解其算法机制和适用边界，可以做出更明智的布局决策。