grid-auto-flow: dense 仅对未显式定位的项生效，只在已有轨道中插空，不生成新行/列；常见无效原因是所有子项均显式定位或使用了 grid-template-areas。
grid-auto-flow: dense 不是“优雅处理空单元格”的开关，它只对未显式定位的项生效，且仅在已有轨道中“插空”，不生成新行/列、不压缩内容、不响应式重排。写上却没反应？八成是所有子项都写了 grid-row 或 grid-column。
为什么 grid-auto-flow: dense 完全没效果
最常见原因：根本没触发自动放置逻辑。
- 所有子元素都用了
grid-row、grid-column或grid-area—— dense 只调度“无家可归”的项，一旦显式定位，它就彻底旁观 - 父容器用了
grid-template-areas—— 区域模板已固化每个项的位置，dense 无效 - 只设了
grid-template-columns却没配grid-auto-rows（或grid-template-rows）—— 没有隐式行轨道，dense 就无格可填 - 同时写了
grid-template-rows和grid-auto-rows—— 显式行会覆盖自动行，dense 失去作用范围
row dense 和 column dense 填空行为差异极大
方向决定“空位”怎么被识别和回填，不是简单换词就能通用。
-
row dense：从左到右、从上到下扫描，找的是**同一行内**的空格子；适合卡片宽度较统一、高度差异不大的横向流 -
column dense：从上到下、从左到右扫描，但“找空格子”只发生在**当前列内部**；不会跨列把一个项塞进左边列的空位，更适合瀑布流类垂直优先布局 - 两者都不改变 DOM 顺序，但视觉跳跃程度不同：
column dense在窄屏下容易出现“左边一长列、右边突然冒一个”的错觉，而row dense更可能把小卡片全挤进第一行，撑高容器
真正能填空的替代方案，别硬刚 dense
当子项高度差异大、需要响应式列数变化、或依赖可访问性时，dense 不仅无效，还会让布局失控。
- 用
column-count+break-inside: avoid：浏览器原生多列流，自动平衡列高，兼容性好（Chrome 50+、Firefox 52+、Safari 14.1+） - 禁用
column-gap，改用子项padding控制间距——gap是间隙，不是空白轨道，dense对它完全无视 - 响应式列数可用
column-count: max(2, min(4, (100vw - 48px) / 320px))，比 Grid 的repeat(auto-fill, ...)更稳定 - 不要给父容器设
height或align-items——列平衡逻辑会被破坏
最容易被忽略的一点：dense 模式不生成新轨道，也不压缩内容，只在已有轨道里“插空”。一旦容器高度受限、或子项用了 minmax() + auto 导致行高浮动，dense 就基本失效——这时候调参不如换方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
