纯 CSS 的 columns 和 grid-template-rows: masonry 均不可靠上线：columns 会截断内容、破坏可访问性且不响应断点；masonry 仅 Chromium 支持，Safari/Firefox 完全不兼容，且无法处理懒加载、动态增删等真实场景；真正可用的是 vanilla-masonry（gzip 后仅 ~3KB），需预设图片宽高、手动触发 layout()，并在内容变化时显式调用。
纯 CSS 的 columns 不是瀑布流，grid-template-rows: masonry 仅 Chromium 支持——真要上线可用，得用 JS 库兜底，别硬扛兼容性。
为什么 columns-3 看起来像瀑布流，实际不能用
它只是把内容按固定高度切片，不是按列高动态分配。图片会被从中间截断，click 事件落在错误位置，键盘导航和屏幕阅读器读取顺序与视觉顺序错位。
- 子元素必须加
break-inside-avoid（Tailwind 默认不提供，得手写或用before:content-['']hack） -
md:columns-2这类响应式写法完全无效，columns属性不响应 Tailwind 断点 - 容器必须设
w-full且不能有h-类，否则列数退化为 1 - 懒加载图片后，高度变化不会触发重排，留下大片空白
为什么 grid-rows-masonry 在 Tailwind 里难落地
Tailwind 默认不提供该工具类，需在 tailwind.config.js 中手动扩展 gridTemplateRows，且只在 Chrome/Edge 116+ 可靠生效。Safari 和 Firefox 当前（2026 年中）仍完全不支持。
- 必须同时写
grid grid-cols-[repeat(3,minmax(300px,1fr))] grid-rows-masonry gap-4，缺一不可 - 子项必须是直接子元素，不能套
divwrapper，也不能带flex、float等布局类 - 某些构建工具无法识别自定义类，得额外加
style="grid-template-rows: masonry"fallback - 即便生效，也无法处理图片加载完成后的回填、动态增删、ResizeObserver 触发等真实场景
真正能上线的方案：vanilla-masonry + 手动控制
gzip 后仅 ~3KB，无依赖，适配所有现代浏览器，且能应对懒加载、动画、窗口 resize 等复杂交互。
立即学习“前端免费学习笔记（深入）”；
- 容器加
relative，子项只保留样式类（如p-4 bg-white rounded），移除所有布局类 - 初始化时传
columnWidth: 300（不是列数），并设percentPosition: true才兼容md:w-1/2这类响应式类 - 图片必须预设宽高，或用
aspect-video等类，否则 JS 计算高度失准 - 每次图片加载完成、内容增删、
ResizeObserver触发后，必须显式调masonryInstance.layout()
最容易被忽略的不是怎么写 JS，而是「什么时候该停手」：当你开始给 Safari 写 polyfill、为每张图加 loading 状态、为增删逻辑反复 patch layout 调用时机——说明你已经踩进纯 CSS 方案的兼容性泥潭了。
