column-width是当前最可靠、最轻量的纯css响应式瀑布流方案，它让浏览器根据容器宽度自动计算列数，无需媒体查询；而grid-repeat(auto-fill,minmax())仅能模拟视觉近似效果，并非真正瀑布流。
纯 CSS 实现响应式瀑布流，column-width 是当前最可靠、最轻量的方案；grid-template-columns: repeat(auto-fill, minmax()) 只能模拟视觉近似效果，不是真瀑布流。
为什么 column-width 是首选
它让浏览器根据容器宽度自动计算列数，无需写一堆 @media 手动降级：设 column-width: 250px 后，768px 宽度下出 2 列，1200px 下出 4 列，320px 下自动退为 1 列。这比 column-count 更符合响应式逻辑——后者强制分 3 列，小屏会撑破或换行错乱。
- 必须加
break-inside: avoid，否则长图/高卡片会被硬截断到两列中 -
column-gap控制列间距，但子项垂直间距得靠margin-bottom（不能用row-gap，多列布局不支持） - 所有子项需是文档流内元素：
position: absolute、display: flex或transform都会让它失效 - Safari 旧版本对
break-inside: avoid-column支持不稳定，统一用break-inside: avoid
grid-template-columns: repeat(auto-fill, minmax()) 的真实能力边界
这个写法常被误称为“Grid 瀑布流”，但它只是等宽多列换行布局：每行高度取该行最高项，第 5 个元素不会落到第 1 列第二行空白处。它适合卡片高度差异小、结构规整的场景（如博客归档），不适合图片画廊类页面。
- 别用
grid-auto-rows: 100px强制行高——应设grid-auto-rows: minmax(100px, auto)，给内容伸展空间 -
auto-fill比auto-fit更稳妥：前者保留空列占位，后者会收缩掉空列，导致列数跳变 - 图片必须加
width: 100%; display: block;，否则 inline 元素默认基线对齐会在底部留 4–5px 空白，引发列高塌陷 - 移动端建议把
minmax()下限调低，例如minmax(160px, 1fr)，避免窄屏下单列过宽
绝对要避开的陷阱：float 和 flexbox 实现
float 是图文环绕机制，不是布局工具。强行用 float: left + 百分比宽度做“瀑布流”，会导致父容器高度塌陷、小屏换行错乱、列高完全不均衡——浏览器根本不会把新元素塞进最短列，它只按文档流顺序填。
-
display: flex+flex-wrap: wrap同样不行：它是一维流式换行，无法实现列间高度避让，视觉上仍是左重右轻 - 两者都不支持列高自适应，也无法响应式列数计算，任何“看起来像”的效果都是巧合，断点一变就崩
- 若已有老项目用了 float/flex，优先重构为
column-width，而非打补丁加clear或伪元素
真正需要列高动态均衡（比如广告跨列、JS 动态插入、用户拖拽排序），multi-column 就会触达语义边界——这时必须切到 JS 方案，比如 Masonry 库或 IntersectionObserver + 列高缓存计算。CSS 层面的“完美瀑布流”只存在于静态、线性、无交互的内容中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
