纯CSS无法真正按高度自动填充空隙，必须依赖JS维护列高数组并动态计算插入位置；CSS Grid的dense模式仅按轨道填空，需配合显式行高或跨行声明才能减少空白。
为什么 column-count 填不满空隙
很多人试过 column-count: 3 + break-inside: avoid，发现图片加载后列高不一，底部出现大片空白——这不是“没填满”，而是浏览器根本没按高度找空隙，它只按文档流顺序切片。每列内容长度固定（比如前10个元素分给第1列），后面元素不管那列还剩多少空间，一律塞进下一列。结果就是短图堆在顶部，长图压在底部，视觉断层明显。
grid-auto-flow: dense 真的能自动填空吗
能，但有前提：必须配合显式行高或预设跨行数。单纯写 display: grid + grid-auto-flow: dense 不会自动感知元素真实高度，它只按网格轨道（grid tracks）填空。如果没设 grid-auto-rows 或没用 grid-row-end: span X 显式声明跨几行，浏览器就按默认行高（通常是内容最小高度）分配，依然留白。
- 正确做法是先定一个基准行高（如
grid-auto-rows: 1px），再用 JS 读取每个.item的offsetHeight，除以基准值，得出应跨行数，动态设置style.gridRowEnd = 'span ' + spanCount - 漏掉
grid-auto-flow: dense是最常见错误，会导致后续项目卡在“下一个完整轨道”，不回填前面短列留下的缝隙 -
auto-fit和auto-fill别混：响应式列数要用auto-fit，否则小屏下会强行保留空列占位
图片异步加载时布局塌陷怎么防
CSS Grid 模拟瀑布流最大的坑：图片还没加载完，offsetHeight 读出来是 0 或极小值，JS 算出的跨行数错，整个布局错位。不能等 load 事件——太慢，且可能被缓存跳过。
- 给
<img alt="HTML瀑布流布局怎么实现按高度自动填充空隙" >加height属性或 CSSaspect-ratio（如aspect-ratio: 4/3），让浏览器渲染前就知道占位尺寸 - 监听
IntersectionObserver，只对进入视口的图片触发重排，比全量load更轻量 - 避免在 grid 容器上设
overflow: hidden，否则跨多行的图片可能被截断
真“按高度填最短列”只能靠 JS
纯 CSS 无法实时比较各列当前总高度并决定插入位置。所谓“填空”，本质是维护一个列高数组，每次插入前找最小值索引，再计算 left/top 偏移。这必须用 JS。
立即学习“前端免费学习笔记（深入）”；
- 核心逻辑就四步：初始化列高数组 → 遍历每个 item → 找最小列索引 → 设置
position: absolute+top偏移 + 更新该列高度 - Masonry 库不是银弹：它内部也得处理图片加载、resize 重排、内存泄漏，小项目不如手写 50 行逻辑清晰
- 如果后端能返回图片宽高比，直接用
grid-row-end: span X配合 CSS 变量，比绝对定位更易维护
真正按高度自动填充空隙，要么接受 CSS Grid 的“模拟”（需 JS 补高度），要么直面上手 JS 维护列高。没有零成本的“自动”。
