grid自动排列留空是因为跨越轨道的项不触发回填，后续项按源顺序和当前行剩余空间推进；启用row dense或column dense可密集填充空位，但会破坏DOM与视觉顺序一致性。
grid-auto-flow 默认是 row，不启用密集排列；要实现“填满空隙”的紧凑布局，必须显式设为 row dense 或 column dense。
为什么 grid 自动排列会留空？
当网格项使用 grid-column 或 grid-row 跨越轨道（比如 grid-column: 1 / 3），后续项仍按“源顺序 + 当前行剩余空间”推进，不会回填前面因跨度造成的空单元格。这是默认行为，不是 bug。
grid-auto-flow: dense 怎么用？
在网格容器上添加该声明即可激活密集重排：
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: row dense; /* 关键 */
}-
row dense：优先按行填充，遇到空位就往前塞 -
column dense：按列方向密集填充（少见，多用于垂直滚动场景） - 必须配合
grid-template-*或隐式轨道生成（如grid-auto-columns）才生效 - 仅影响**自动放置的项**（即没写
grid-column/grid-row的项）；已明确指定位置的项不会被移动
密集排列的副作用和坑
它会让 DOM 顺序和视觉顺序不一致，可能破坏可访问性与键盘焦点流：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 屏幕阅读器仍按 HTML 源序读取，但视觉上第 3 个元素可能出现在第 1 行末尾
- 用
tab键导航时，焦点跳转路径可能突兀、不符合用户预期 - 动画或 JS 查询
getBoundingClientRect()时，位置和 DOM 序不匹配，容易出逻辑错 - 如果多个项都跨相同区域（如都设
grid-column: 1 / -1），dense不解决重叠——它只管“空位”，不管“冲突”
替代方案：什么时候别硬上 dense？
若目标只是“不留白”，优先检查是否真需要密集排列：
- 用
grid-template-areas显式规划区域，比依赖dense更可控 - 对卡片类列表，改用
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))+gap，天然紧凑且响应式 - 若需动态插入/删除项并保持紧凑，考虑 JS 控制
grid-area或换用display: contents配合 Flexbox
密集模式是补救手段，不是布局首选。真正难处理的，往往是语义结构本身没对齐视觉需求——这时候调 CSS 不如先理 HTML。
