纯 CSS 的 grid-template-rows: masonry 在 Tailwind 中需手动配置且仅 Chrome/Edge 116+ 支持，Firefox 和 Safari 用户（约 35%）无法正常显示瀑布流；columns-3 不是 Masonry，会导致截断、语义错乱和响应式失效；真正可用方案是引入轻量 JS 库 vanilla-masonry，兼顾兼容性与可维护性。
纯 CSS 的 grid-template-rows: masonry 在 Tailwind 中无法开箱即用，且仅 Chrome/Edge 116+ 支持；Firefox 和 Safari 用户（合计约 35%）看到的是等高网格而非瀑布流。别指望靠几个类名就搞定。
为什么 columns-3 不是瀑布流
columns-3 是为报纸文本设计的切片机制，不是 Masonry 布局：
- 图片会被从中间硬截断，除非每个子项都加
break-inside: avoid+display: block - DOM 顺序仍是线性（1→2→3→4），但视觉错位，导致键盘导航、屏幕阅读器、
:nth-child全部失效 -
md:columns-3这类响应式写法完全无效，必须手写媒体查询 - 懒加载图片后高度变化不会触发重排，留下大片空白
- 子项若含
position: absolute（如角标 badge），会脱离列上下文，定位漂移
怎么让 grid-template-rows: masonry 在 Tailwind 里勉强生效
它合法，但 Tailwind 默认不封装，且对结构和属性极其敏感：
- 必须在
tailwind.config.js的theme.extend.gridTemplateRows中手动添加：masonry: 'masonry' - HTML 容器需同时写：
grid grid-cols-[repeat(3,minmax(300px,1fr))] grid-rows-masonry gap-4—— 缺一不可 - 不能用
grid-cols-3（它展开为repeat(3, minmax(0, 1fr))），fr 单位会干扰 Masonry 行计算 - 子项必须是直接子元素，不能套 wrapper；不能带
float、flex、grid-row等布局类 - 构建工具（如某些旧版 Vite 插件）可能不识别自定义类，建议显式加
style="grid-template-rows: masonry"保底
真正上线可用的方案：用 vanilla-masonry + Tailwind 样式分离
放弃“纯类名实现”的执念，JS 方案反而更可控、兼容、可维护：
立即学习“前端免费学习笔记（深入）”；
- 容器加
relative，子项只保留样式类（如p-4 bg-white rounded），移除所有布局类 - 初始化时传
columnWidth: 300（单位是像素，不是列数），并设percentPosition: true才能兼容md:w-1/2等响应式类 - 图片务必预设宽高或用
aspect-video/aspect-square，否则 JS 计算高度因未加载失准 - 图片加载完成、内容增删、窗口 resize 后，必须手动调
masonryInstance.layout()—— 注意要用ResizeObserver，不是window.resize - gzip 后仅 ~3KB，无依赖，比堆砌 polyfill + loading 状态 + 多个 observer 更轻量
最容易被忽略的不是技术细节，而是判断时机：当你开始为 Safari 写 polyfill、为每张图加 onLoad 回调、为 v-for 列表写过渡重排逻辑时，说明你已经绕远路了——这时候该直接上 vanilla-masonry。
