columns错乱因按高度切分内容而非子元素分栏，导致空白、列高不齐；真瀑布流需每列独立生长，css原生仅firefox支持masonry，全兼容需masonry js库。
为什么直接用 columns 做瀑布流会错乱？
因为 columns 是 CSS 多栏排版（multi-column layout），它把**单个容器的内容按高度切分**，不是按子元素分栏。一旦子项高度差异大、或用了 break-inside: avoid（比如卡片加了防断行），就会出现空白缝隙、列高不齐、甚至内容重叠——这不是瀑布流，是“多栏流”。
真正瀑布流要求每列独立生长、子项按顺序“填入最短列”，columns 根本不提供这个能力。
-
columns适合长文分栏阅读（如报纸），不适合卡片网格 - Tailwind 的
columns-3只是设置column-count: 3，没改底层行为 - 浏览器原生不支持 CSS 瀑布流（
display: grid的masonry还在实验阶段，仅 Firefox 支持且需前缀）
当前最稳的 Tailwind 瀑布流方案：CSS Grid + masonry（Firefox 专用）
Firefox 119+ 支持 grid-template-rows: masonry，配合 Tailwind 的 grid 工具类可快速启用，但必须明确限制容器宽度和列宽，否则失效。
<div class="grid grid-cols-3 gap-4 w-full max-w-6xl mx-auto" style="grid-template-rows: masonry;"> <div class="bg-slate-100 p-4 rounded">Item 1</div> <div class="bg-slate-200 p-4 rounded">Item 2 (tall)</div> <div class="bg-slate-100 p-4 rounded">Item 3</div> <div class="bg-slate-200 p-4 rounded">Item 4</div> </div>
- 必须显式写
style="grid-template-rows: masonry;"，Tailwind 没封装该属性 - 列数由
grid-cols-3控制，但列宽不能是fr，得用固定值（如grid-cols-[repeat(3,minmax(300px,1fr))]）或配合max-w- - 其他浏览器会回退为普通 grid（等高行），不是瀑布流——别指望全兼容
想全浏览器兼容？放弃纯 CSS，用 Masonry JS 库 + Tailwind
推荐 Masonry v4（轻量、无依赖），它通过 JS 计算每列高度并绝对定位子项。Tailwind 只管样式，布局交给它。
关键点：
- 容器设
relative，子项移除 float / flex / grid 相关类，只留样式类（如p-4 bg-white rounded） - JS 初始化时指定列宽（不是列数）：
new Masonry(element, { columnWidth: 300, percentPosition: true }) - 用
percentPosition: true才能兼容 Tailwind 的响应式（如md:w-1/2） - 动态增删内容后，必须调用
layout()重排，不能靠 CSS 自动响应
容易被忽略的细节：图片加载和高度塌陷
瀑布流最常卡在图片没加载完就计算高度，导致列高错乱。Masonry 默认不等图片加载，得手动处理：
- 给图片加
loading="lazy"同时监听imagesLoaded（需额外引入 imagesLoaded） - 或统一用占位图 +
aspect-ratio（Tailwindaspect-video等），让容器有初始高度 - 子项若含异步内容（如评论数接口），务必在数据渲染后调用
masonry.layout() - 不要对子项设
height: 100%或min-height，会干扰 Masonry 高度测量
真要快速上线又不想写 JS？老实用两列 flex flex-col 手动拆数组，简单粗暴，兼容性最好，只是维护成本略高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
