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

概述Grid 的自动放置根据源顺序与显式轨道将项依次布局，`grid-auto-flow` 控制方向与回填策略。`dense` 允许回填空洞以提高空间利用率，但可能导致阅读顺序与视觉顺序不一致，需谨慎使用。示例.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-placementMDN `grid-auto-flow` 文档：https://developer.mozilla.org/docs/Web/CSS/grid-auto-flow