纯 css 瀑布流仅 chrome/edge 116+ 可靠支持，firefox/safari 完全不支持 grid-template-rows: masonry；columns-3 非真正瀑布流，会截断图片、错位点击且无法响应式自适应；推荐 vanilla-masonry 库兜底兼容。
纯 CSS 方案在当前（2026 年中）只能在 Chrome/Edge 116+ 上可靠运行，Firefox 和 Safari 完全不支持 grid-template-rows: masonry；别指望 columns-3 能做出真正瀑布流——它会截断图片、错位点击区域。
为什么 columns-3 不是瀑布流
columns-3 是为报纸排版设计的，它把内容按固定列高切片，不是按“哪列最短就放哪”逻辑排列。结果就是：图片被硬生生从中间切断、click 事件落在错误位置、子元素无法跨列、响应式下更混乱。
- 它不感知子项真实高度，只按文本流断行规则分列
- 所有子元素必须是块级且设
break-inside: avoid，否则卡片会被劈开 - 无法控制列宽自适应，
columns-width是最小宽度，不是目标宽度 - 滚动时内容重排不可控，懒加载图片后不会自动回填空洞
grid-template-rows: masonry 怎么用才生效
这个属性本身合法，但 Tailwind 默认没封装成工具类，必须手动扩展，且仅限现代 Chromium 内核。
- 在
tailwind.config.js的theme.extend.gridTemplateRows中添加：masonry: 'masonry' - HTML 中必须同时写：
grid grid-cols-3 grid-rows-masonry gap-4，缺一不可 - 子项不能嵌套 wrapper，必须是直接子元素；也不能带
float、flex或其他布局类 - 列宽不能用
fr单位（如grid-cols-3），得用固定最小值：grid-cols-[repeat(3,minmax(300px,1fr))] - 必须显式写
style="grid-template-rows: masonry"才能 fallback 到普通 grid（部分旧构建工具不识别自定义类）
兼容性兜底必须靠 JS 库
如果你的用户包含 Firefox 或 Safari 用户（2026 年仍占约 35%），或者需要懒加载、动画、动态增删内容，CSS 方案直接放弃。
- 推荐
vanilla-masonry（v4）：无依赖、gzip 后仅 ~3KB - 容器加
relative，子项只保留样式类（如p-4 bg-white rounded），移除所有布局类 - 初始化时传
columnWidth: 300（不是列数），并设percentPosition: true才能兼容md:w-1/2这类响应式类 - 图片加载完成、内容增删、窗口 resize（需用
ResizeObserver，不是window.resize）后，必须手动调masonryInstance.layout() - 图片务必预设宽高或用
aspect-*类，否则 JS 计算高度会因未加载而失准
真正容易被忽略的不是怎么写，而是「什么时候该停手」：当你发现要为 Safari 加 polyfill、为图片加 loading 状态、为增删内容写一堆 observer 时，说明你已经走在 JS 方案的路上了——这时候不如直接上 vanilla-masonry，少踩三天坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
