纯CSS实现瀑布流最轻量方案是column-count配合break-inside: avoid，它利用浏览器多列布局的列高均衡分配机制，自动将新元素插入高度最小列，实现真正按列高最小化填充，无需JS即可达成视觉列高接近一致。
纯 CSS 实现瀑布流，column-count + break-inside: avoid 是最轻量、兼容性最好的方案；而 grid-template-columns + grid-auto-flow: dense 更可控、响应式更自然，但不是真正“按列高度最小化填充”的瀑布流——它只是视觉近似。
用 Multi-column 做真实高度平衡的瀑布流
浏览器原生的多列布局会自动把子元素按**列高均衡原则**分配，比如三列中第 1 列刚到 800px，第 2 列才 600px，下一个元素就会优先塞进第 2 列。这是目前唯一无需 JS 就能达成“视觉上列高接近一致”的纯 CSS 方式。
常见错误现象：
-
break-inside: avoid写成break-inside: avoid-column（后者在部分旧版 Safari 不生效） - 容器没设
height或max-height，导致列数失效（column-count在无约束容器中可能退化为单列） - 卡片内用了
flex或position: absolute，破坏了文档流，使列分配逻辑错乱
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须加
break-inside: avoid，否则长卡片会被截断到两列里 - 用
column-gap控制列间距，别用margin——后者可能触发额外换列 - 响应式时优先改
column-count，而不是切到 Grid：例如@media (max-width: 768px) { column-count: 2; }
用 CSS Grid 模拟瀑布流但不真平衡列高
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) 这类写法本质是“等宽网格”，元素按行顺序填入，不是按列高动态分配。所谓“瀑布效果”其实是靠元素自身高度差异+ grid-auto-flow: dense 填空实现的视觉错觉。
使用场景：
- 需要精确控制某项跨列（如广告位占满两列），Multi-column 完全做不到
- 卡片有 hover 动画、transition，Grid 的渲染稳定性比 Multi-column 高
- 你愿意接受“前几项排得整齐，后面出现明显空隙”的情况（尤其当卡片高度差异大时）
参数差异：
-
minmax(250px, 1fr)中的1fr是弹性分配，但不会重排已渲染的项；Multi-column 会全局重平衡 -
grid-auto-rows设固定值（如200px）可避免高度塌缩，但会让矮卡片留白；设auto或fit-content更贴近内容，却可能放大空隙 - Grid 无法让一个元素“自动选择最短列插入”，必须靠 JS 分组或服务端预计算
什么时候该放弃纯 CSS？
当你遇到这些信号，说明 Multi-column 和 Grid 都已力不从心：
- 用户反馈“明明还有空间，为什么下一张图跳到最底下？”——这是 Grid 的行序填充缺陷
- 卡片高度差异极大（比如 100px ~ 800px），且要求首屏加载后各列视觉高度差 ≤ 50px
- 需要支持“无限滚动 + 动态插入新卡片”，同时保持列高实时均衡
这时就得引入 JS 库（如 masonry-layout）或自己维护列高数组，用 position: absolute 手动定位。CSS 方案在此类复杂需求下只是权宜之计，不是妥协，而是边界清晰的技术选型。
