grid-auto-flow: dense 仅对未显式定位的项生效，需同时满足有空位、有自动轨道、无显式定位三条件；常见无效原因是所有子项均被显式定位，或父容器未定义 grid-auto-rows/columns。
grid-auto-flow: dense 不能“优雅”处理空单元格，它只是让自动放置的项回头塞进已有轨道里的空位；真要填空，得先确保有空位、有轨道、没显式定位——三者缺一不可。
为什么写了 grid-auto-flow: dense 却完全没反应
最常见原因是：所有子项都用了 grid-column、grid-row 或 grid-area，导致根本没有“自动放置”的项可调度。dense 只影响那些没被显式定位的元素。
- 检查是否混用了
grid-template-areas：area 区域内位置已固化，dense 对其无效 - 确认父容器定义了
grid-auto-rows（或grid-auto-columns）：没有自动轨道，dense 就无格可填 - 避免同时设
grid-template-rows+grid-auto-rows：显式行会覆盖自动行逻辑，dense 失去作用范围
grid-auto-flow: row dense 和 column dense 的实际区别
方向不同，填空逻辑完全不同：row dense 是从左到右、从上到下找空格子；column dense 是从上到下、从左到右找——但“找空格子”只在当前列内发生，不会跨列回填。
-
row dense更适合横向卡片墙，小卡片能插进大卡片右侧剩余空间 -
column dense在瀑布流式布局中更可控，新增项总往下追加，不易“跳格子” - 两者都不改变 DOM 顺序，但视觉跳跃程度不同：column dense 在窄屏下更容易出现“左边一长列、右边突然冒一个”的错觉
真正能填空的替代方案：别硬刚 dense
当 item 高度差异大、需要响应式列数变化、或依赖可访问性时，grid-auto-flow: dense 不仅无效，还会让布局失控。此时应换思路：
- 用
column-count+break-inside: avoid：浏览器原生多列流，自动平衡列高，兼容性好（Chrome 50+、Firefox 52+、Safari 14.1+） - 禁用
column-gap，改用子项padding控制间距，避免 gap 干扰列宽计算 - 不要给父容器设
height或align-items，否则列平衡逻辑会被破坏 - 响应式列数可用
column-count: max(2, min(4, (100vw - 48px) / 320px))，比 grid 的repeat(auto-fill, ...)更稳定
dense 模式最易被忽略的点是：它不生成新轨道，也不压缩内容，只在已有轨道里“插空”。一旦容器高度受限、或子项用了 minmax() + auto 导致行高浮动，dense 就基本失效——这时候强行调参，不如换方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
