纯css columns不是真正自适应瀑布流，因其按固定高度切分、不响应列数切换、图片易截断；chrome/edge的masonry仅部分支持；推荐vanilla-masonry方案，兼容性强且可控。
纯 CSS 的 columns 是唯一能“快速实现”且零 JS 的方案，但它不是真正意义上的自适应瀑布流——它不按高度分配、不响应式切换列数、图片易被截断，只适合静态摘要类内容。真要兼顾语义、无障碍、懒加载和跨浏览器一致性，必须引入轻量 JS 库。
为什么 columns-3 不是自适应瀑布流
浏览器把 columns 当作报纸切片机制：它按固定高度把内容从上到下线性切分，不感知子项真实高度，也不做“哪列最短就放哪”的动态分配。
- 图片默认是
inline元素，会被硬生生从中截断，除非每个子项都加block+break-inside-avoid -
sm:columns-2 md:columns-4这类响应式写法完全无效，columns不支持断点自动列数切换 - DOM 顺序仍是 1→2→3→4，但视觉错位，导致键盘导航、
:nth-child、屏幕阅读器全部失效 - 懒加载图片后高度变化不会触发重排，留下大片空白
Chrome/Edge 中勉强可用的 grid-template-rows: masonry
这是目前唯一原生支持“高度优先分配”的 CSS 方案，但仅 Chrome 116+ 和 Edge 116+ 支持，Firefox 和 Safari（合计约 35% 用户）会退化为等高网格，视觉断裂。
- 必须在
tailwind.config.js中手动扩展：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等布局类
真正上线可用的方案：vanilla-masonry + Tailwind 样式分离
放弃“纯类名实现”的执念。JS 方案反而更可控、兼容、可维护，gzip 后仅 ~3KB，无依赖。
- 容器加
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
最容易被忽略的不是技术细节，而是判断时机：当你开始为 Safari 用户补 polyfill、给 columns 加各种 hack、或在 grid-rows-masonry 上反复调试兼容性时，其实已经该切到 vanilla-masonry 了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
