columns 是唯一真正开箱即用、无需 js、兼容 ie10+ 的纯 css 瀑布流方案，但它是按文档流顺序填列而非“最短列优先”，视觉错落仅源于元素高度差异。
纯 CSS 实现瀑布流，columns 是唯一真正开箱即用、无需 JS、兼容 IE10+ 的方案——但它不是 Masonry，也不按“最短列优先”分配，别指望它能动态找高度最小的列来塞新卡片。
为什么 columns 不是真瀑布流，但仍是首选
浏览器把容器当作文本段落处理，子元素严格按文档流顺序从上到下、从左到右填满各列。所以第 1 个元素在第 1 列顶部，第 2 个紧接其后，直到第 1 列满，再跳第 2 列顶部……视觉错落只是因为元素高度不一，而非算法调度。
- 优点：零 JS、体积小、渲染快、
columns-3这类 Tailwind 类直接可用 - 缺点：无法响应式自动算列数（必须手动写
sm:columns-2 md:columns-4）；不支持column-width: 300px自动推导列数（除非你放弃 Tailwind 工具类，手写 CSS） - 典型误用：给容器设
min-height—— 它不触发分栏，必须用height或max-height，比如max-height: 80vh
break-inside-avoid 不加就等于白做
没加这个，卡片大概率被截断：标题在左列、图片掉进右列底部。Tailwind 默认提供 break-inside-avoid 类，但要注意三件事：
- 旧版 Safari 需额外补
-webkit-column-break-inside: avoid，可加class="break-inside-avoid [-webkit-column-break-inside:avoid]" - Firefox 有时要
-moz-break-inside: avoid，建议统一用 PostCSS Autoprefixer 处理 - 如果卡片内部用了
flex或grid，只要最外层加了break-inside-avoid，子元素不用重复加
column-gap 和 margin-bottom 别混着用
用 margin-bottom 模拟卡片间距，会干扰浏览器对“实际内容高度”的判断，导致列高严重失衡——常见现象是一列堆满、另一列大片留白。
- 正确做法：只用
column-gap控制列间空隙，值推荐用px（如column-gap-4），避开 Safari 对rem或百分比的解析偏差 - 卡片内图片必须设
width: 100%+height: auto，否则原始尺寸撑破列宽，引发错位 - 异步加载图片时，需监听
load事件后触发重排：container.style.columnCount = container.style.columnCount
别硬套 grid-cols-3 或 flex-wrap
grid-cols-3 是规则网格，每行取该行最高项高度，结果是“台阶式”，不是错落；flex-wrap 是按行打包，所有元素横向排满再换行，根本没法跨行错位。
-
grid-template-columns: masonry确实是真瀑布流，但仅 Chrome 115+ 支持，Safari / Firefox 完全不认，Tailwind 也没对应工具类 -
display: grid-lanes（Chrome Canary / Safari 技术预览已支持）是未来方向，但 2026 年 8 月仍属实验性特性，生产环境慎用 - 如果你真需要“最短列优先”，JS 方案（如
masonry-layout库）仍是目前唯一可靠选择
用 columns 做瀑布流，核心就三件事：容器有 max-height、每个卡片加 break-inside-avoid、只靠 column-gap 控间距——其余都是妥协边界。别试图让它干 Masonry 的活，它本来就不打算那么干。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
