纯 css grid 和 tailwind 无法实现真正瀑布流；tailwind 无 grid-rows-auto 类，其 grid-row 相关类均为静态预设，不支持动态跨行或内容自适应高度。
纯 CSS Grid 无法实现真正的瀑布流，grid-rows-auto 本身不是合法的 Tailwind 类名——它不存在。Tailwind 没有提供动态计算行高或跨行数的能力，所有 grid-row- 相关工具类（如 grid-row-span-2）都是静态、预设的整数值，不响应内容真实高度。
为什么 grid-rows-auto 是个误导性概念
Tailwind 的 grid-rows 系列仅用于设置 grid-template-rows，比如 grid-rows-[1fr_2fr] 或 grid-rows-3，它控制的是显式定义的行轨道数量或比例，和“自动适配内容高度”完全无关。所谓“auto”在这里只是 CSS 值，不是运行时计算逻辑。
-
grid-auto-rows才是控制隐式行轨道（即内容超出显式行时自动生成的行）的关键属性，但 Tailwind 默认不暴露该属性的实用类 - 你无法用
class="grid-auto-rows-[10px]"这种写法——Tailwind 不支持带单位的任意值，除非你手动在theme.extend.spacing中注册10px，且仍需配合自定义插件或 JIT 模式启用 - 即便能写出来，
grid-auto-rows: 10px也只是把网格切成固定小格子，不解决“哪一列最短”“如何填空洞”这些瀑布流核心问题
在 Tailwind 中模拟瀑布流的真实路径
必须放弃“纯 Tailwind 类名搞定”的幻想。可行组合是：grid + grid-auto-rows（手写 CSS）+ grid-row-end: span X（JS 动态设置）。
- 用 Tailwind 写基础结构：
grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 - 手写少量 CSS 补充 Grid 隐式行为：
.waterfall-grid { grid-auto-rows: 10px; grid-auto-flow: dense; } - 每个
.item初始不设grid-row-end，等 DOM 渲染、图片加载完成后，用 JS 调用el.getBoundingClientRect().height，再除以10并向上取整，最后el.style.gridRowEnd = `span ${spanCount}` - 监听
ResizeObserver（不是window.resize），因为列数变化可能不触发 resize 事件（例如从md:grid-cols-2切到lg:grid-cols-3时容器宽度未变）
常见翻车点：Tailwind 的 class 顺序与覆盖逻辑
Tailwind 生成的 CSS 规则优先级由类名顺序决定，而 grid-row-end 是行内样式（style 属性），天然高于任何 class。这点有利也有弊：
- 好处：JS 设置的
style.gridRowEnd不会被 Tailwind 的grid-row-span-*覆盖 - 坏处：如果你误用
class="grid-row-span-5 grid-row-span-10"，后者会生效，但它是静态的，对不同高度项毫无意义 - 更隐蔽的问题：某些框架（如 Vue）的
v-for+transition-group可能导致元素重排时getBoundingClientRect()拿到旧尺寸，必须等nextTick或ResizeObserver确认布局稳定后再计算
真正卡住多数人的不是怎么写 CSS，而是忘了「高度必须等图片加载完再量」——懒加载图片、字体加载延迟、服务端渲染首屏无宽高属性，都会让 span 值算错。没有防抖、没监听 load 事件、没处理异步插入新项，就别指望它能动起来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
