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

---

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

keywords:

• CSS Grid
• auto-placement
• grid-auto-flow
• dense 模式
• 性能

description: '介绍 Grid 的自动放置规则与 grid-auto-flow: row|column|dense，在不完整网格中进行回填与布局优化，说明适用场景与性能注意事项，并提供示例与兼容建议。'

categories:

• 文章资讯
• 编程技术

---

概述

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-placement
• MDN grid-auto-flow 文档：https://developer.mozilla.org/docs/Web/CSS/grid-auto-flow