CSS Grid 自动放置与 dense 模式：布局策略与性能

概述 Grid 的自动放置根据源顺序与显式轨道将项依次布局，`grid-auto-flow` 控制方向与回填策略。`dense` 允许回填空洞以提高空间利用率，但可能导致阅读顺序与视觉顺序不一致，需谨慎使用。 示例 ```css .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: row dense; gap: 8px } .grid > .wide { grid-column: span 2 } ``` 工程建议 - 可访问性：避免 `dense` 导致阅读顺序与视觉顺序错位；为卡片提供语义与导航辅助。 - 性能：控制轨道数量与复杂度；减少大规模重排与回填计算。 - 适用场景：图片瀑布流与卡片墙可考虑 `dense`；表单与列表不建议使用。 参考与验证 - MDN Grid auto-placement 文档：https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Grid_auto-placement - MDN `grid-auto-flow` 文档：https://developer.mozilla.org/docs/Web/CSS/grid-auto-flow