columns-3 不能实现真正瀑布流，因其按列切分导致图片截断、点击错位；原生方案需 CSS Grid + masonry（Chrome/Edge 116+支持），但 Firefox/Safari 不支持，推荐用 vanilla-masonry 等 JS 库，并注意图片宽高预留与加载时机。
columns-3 在瀑布流中为什么不能直接用
直接写 columns-3 不会得到你想要的“图片高度不一、自动错落”的瀑布流，它只是把内容按列切分——文字会被断行、图片会被截断、子元素无法跨列、点击区域错位。浏览器原生 columns 是为报刊排版设计的，不是为卡片式瀑布流服务的。
真正可用的瀑布流方案只有 CSS Grid + Masonry（有限支持）或 JS 库
目前唯一被主流浏览器（Chrome 116+、Edge 116+）原生支持的真瀑布流是 display: grid 配合 grid-template-rows: masonry，但 Tailwind 默认不提供该工具类，需手动添加：
/* 在 tailwind.config.js 的 theme.extend 的 fontFamily 或其他位置加 */
module.exports = {
theme: {
extend: {
gridTemplateRows: {
masonry: 'masonry',
},
},
},
}然后在 HTML 中使用：
<div class="grid grid-cols-3 grid-rows-masonry gap-4"> <div class="bg-slate-100 rounded-lg"><img src="..." alt=""></div> <div class="bg-slate-200 rounded-lg"><img src="..." alt=""></div> <div class="bg-slate-300 rounded-lg"><img src="..." alt=""></div> </div>
-
grid-rows-masonry必须配合grid-cols-3和显式gap，否则行为不可控 - 所有子项必须是直接子元素，不能嵌套 wrapper 容器
- Firefox 和 Safari 当前完全不支持
masonry，上线前务必检查 caniuse
兼容性要求高时，用轻量 JS 库代替 CSS 方案
如果要支持 Firefox/Safari 或需要更稳定控制（比如懒加载、动画、响应式列数切换），推荐用 masonic（React）或 vanilla-masonry（纯 JS），而不是强行 hack columns-3。例如用 vanilla-masonry：
立即学习“前端免费学习笔记（深入）”；
<div id="masonry-grid" class="grid-cols-3">
<div class="bg-slate-100 rounded-lg">...</div>
<div class="bg-slate-200 rounded-lg">...</div>
</div>
<p><script>
const grid = document.getElementById('masonry-grid');
new Masonry(grid, {
columnWidth: '.grid-cols-3 > *', // 按子项宽度算列宽
gutter: 16,
});
</script>- Tailwind 的
columns-3此时可以完全弃用，它和 JS 瀑布流互斥 - 注意：JS 初始化前确保 DOM 已就绪，图片尺寸未定会导致重排，建议配合
imagesLoaded或loading="lazy"+ 宽高属性 - 移动端列数应降为 1–2 列，
masonry实例需销毁重建，不能仅靠响应式类切换
别忽略图片加载对瀑布流的破坏性影响
无论用 CSS 还是 JS 方案，如果图片没设宽高或没加载完成，容器高度为 0，瀑布流会塌陷或错乱。最简单有效的做法是：
- 所有
<img>加width和height属性（即使只是占位比例），让浏览器预留空间 - 用
aspect-[4/3]或aspect-video配合object-cover控制缩放 - 避免在
src上直接写远程 URL，先用data-src，等 JS 加载逻辑触发后再赋值，防止首屏抖动
这个细节比选哪种布局方式更容易导致线上 bug，尤其在 CMS 动态插入内容时。
