纯CSS无法实现真正防空缺对齐的瀑布流；column-count仅防截断不均衡列高，grid-auto-flow:dense无法动态填空，grid-template-rows:masonry兼容性极差且不重排，真正底部对齐必须依赖JS。
纯 CSS 无法实现“防空缺对齐”的真瀑布流——也就是每列底部严格对齐、短卡片自动填入前列剩余空隙的效果。所有号称“纯 CSS 瀑布流”的方案，要么是视觉近似，要么依赖特定浏览器支持且降级不可控。
column-count 能防截断但不防空缺
column-count 是最轻量的纯 CSS 方案，但它按文档流切分内容，不是按高度排序填充。即使加了 break-inside: avoid，也只保证单个卡片不被跨列截断，完全不管列高是否均衡。
- 卡片高度差异大时，必然出现底部参差、列间空缺（尤其 Safari 和 Firefox）
-
column-width比column-count更适合响应式，但同样不解决空缺问题 - 必须统一设
img { display: block; }，否则<img>默认 inline 会在列底留白，加剧空缺感 - Firefox 需额外加
page-break-inside: avoid，Safari 则对break-inside支持不稳定
grid-auto-flow: dense 只能模拟，不能真正填空
grid-auto-flow: dense 常被当作“折中方案”，但它只是让后续子项尝试填补前面留下的空格，并不重新计算列高；一旦卡片高度动态变化（比如图片加载后撑开），dense 就会错乱。
- 必须预设每个卡片的
grid-row-end: span X（X 是预估行数），否则 dense 无从判断该填哪 - 容器不能设
overflow: hidden，否则跨行元素会被裁剪 -
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))是安全写法，但列数随宽度变化时，span 值若没同步更新，就会错位 - 图片未加载完成前，
getBoundingClientRect().height返回 0，导致 span 计算失效——这得靠 JS 补救，已非纯 CSS
grid-template-rows: masonry 是唯一原生方案，但兼容性极差
grid-template-rows: masonry 是目前唯一能真正实现列高平衡的纯 CSS 属性，但它仅在 Chrome 116+ / Edge 116+ 中可用，Safari 和 Firefox 完全不识别，且不支持回退重排。
立即学习“前端免费学习笔记（深入）”；
- 必须明确写
grid-template-columns（如250px 250px），不能用auto-fill或1fr - 子项禁止设
grid-row或grid-column，否则退出 Masonry 流式布局 - 图片加载完成后高度变化，
masonry不会重排——它只在首次渲染时计算一次 - 无法与
grid-auto-flow: dense共存，也不能和显式grid-template-rows混用
真正要“防空缺对齐”，就得接受 JS 的必要性：Masonry.js 或 CSS Grid + ResizeObserver + 图片 load 监听组合。纯 CSS 方案里，没有一个能同时满足“响应式 + 动态高度 + 底部对齐 + 无 JS”。最容易被忽略的是——你看到的“对齐”，往往是固定高度卡片 + dense 模拟出来的假象，一旦内容真实浮动，空缺立刻暴露。
