columns-3 不是真正瀑布流，仅按固定高度切片导致图片截断、交互错位、无障碍断裂；原生 grid-rows-masonry 兼容性差（Chrome/Edge 116+ 支持，Firefox/Safari 不支持）；当前可靠方案是 vanilla-masonry + 手动 layout() 调用。
columns-3 不能实现真正瀑布流，它只是把内容按列切分——图片会被截断、点击区域错位、子项无法跨列。别被“瀑布流”字眼误导，这是报刊排版用的机制，不是卡片式布局该用的方案。
为什么 columns-3 在瀑布流场景下会出问题
浏览器对 columns 的实现逻辑是：按固定高度切片，从上到下、从左到右线性填满每一列。它不感知子元素真实高度，也不做“哪列最短就放哪”的动态分配。
- 图片默认是内联元素，会被硬生生从中截断，除非显式加
display: block和break-inside: avoid -
columns不支持响应式列数切换，md:columns-3这类写法完全无效，必须手写媒体查询 - DOM 顺序仍是线性（1→2→3→4），但视觉上被强制分栏，导致键盘导航、屏幕阅读器体验断裂
- 懒加载图片后，内容高度变化不会触发重排，留下大片空白
如果坚持用 columns，至少得这么写才勉强可用
仅适用于纯文字摘要、词典条目等无交互、无图片、高度可预估的场景。卡片类内容强烈不推荐。
- 容器加
columns-3+column-gap-4 - 每个子项必须设
block显示模式：inline-block或block，并加break-inside-avoid（Tailwind 中需自定义或用before:content-['']+break-before-column等 hack） - 所有子项宽度设为
w-full，否则会因 inline 布局产生意外间隙 - 高度必须固定或用
min-h-[200px]类兜底，否则列高不一致时会出现严重错位
grid-template-rows: masonry 是唯一原生可行路径，但兼容性极差
Chrome/Edge 116+ 支持，Firefox 和 Safari 当前（2026 年中）仍完全不支持。这意味着约 35% 的真实用户看到的是等高网格，而非瀑布流。
- Tailwind 默认不提供
grid-rows-masonry，需在tailwind.config.js中手动扩展：gridTemplateRows: { masonry: 'masonry' } - HTML 中必须同时写
grid grid-cols-3 grid-rows-masonry gap-4，且子项必须是直接子元素，不能套 wrapper - 列宽不能用
grid-cols-3（对应repeat(3, minmax(0, 1fr))），得用grid-cols-[repeat(3,minmax(300px,1fr))]避免 fr 单位干扰 masonry 行计算 - 更稳妥的做法是直接写
style="grid-template-rows: masonry"，避免某些构建工具无法识别自定义类
真正上线可用的方案：vanilla-masonry + Tailwind 样式分离
放弃“纯 Tailwind 类名搞定”的幻想。JS 库才是当前兼容性和可控性的底线。
立即学习“前端免费学习笔记（深入）”；
- 容器加
relative，子项只保留样式类（如p-4 bg-white rounded-lg），移除所有flex/grid/float相关布局类 - 初始化时传
columnWidth: 300（单位像素，不是列数），并设percentPosition: true才能兼容md:w-1/2这类响应式宽度 - 图片必须预设宽高，或用
aspect-video/aspect-[4/3]类，否则 JS 计算高度时会取到 0 - 内容动态增删、图片加载完成、列数响应式切换（如
md:grid-cols-2→lg:grid-cols-3）后，必须显式调用masonryInstance.layout() - 监听尺寸变化要用
ResizeObserver，不是window.resize—— 因为列数切换可能不触发窗口 resize
