Tailwind 中需在 tailwind.config.js 的 theme.extend.gridTemplateRows 中添加 masonry: 'masonry' 才使 grid-template-rows: masonry 生效，且 HTML 容器必须含 grid 类、显式列定义（如 grid-cols-[repeat(3,minmax(300px,1fr)))]、grid-rows-masonry 和 gap-4，子项须为直接子元素且不破坏文档流；但该属性仅 Chrome/Edge 116+ 支持，Firefox 和 Safari 不支持，故推荐使用 vanilla-masonry 等轻量 JS 方案以确保兼容性与可靠性。
grid-template-rows: masonry 在 Tailwind 中怎么配才生效
它合法，但 Tailwind 默认不提供 grid-rows-masonry 工具类，且对 HTML 结构和 CSS 属性极其敏感。强行写上去大概率白费。
必须在 tailwind.config.js 的 theme.extend.gridTemplateRows 里手动加一行：
gridTemplateRows: {
masonry: 'masonry',
}
HTML 容器需同时满足以下全部条件：
- 必须有
grid类（不能只靠grid-cols-3） - 列定义必须用
grid-cols-[repeat(3,minmax(300px,1fr))]，不能用grid-cols-3（后者展开为minmax(0, 1fr)，会干扰 Masonry 行高计算） - 必须显式写
grid-rows-masonry和gap-4 - 子项必须是直接子元素，不能套
<div class="wrapper"> 这类 wrapper <li>子项不能带 <code>float、flex、grid-row或任何破坏文档流的布局类 - 图片默认是内联元素，会被从中间硬截断，除非每个子项都加
block+break-inside-avoid - DOM 顺序仍是线性（1→2→3→4），但视觉被强制分栏，导致键盘导航、
:nth-child、屏幕阅读器全部失效 -
md:columns-3这类响应式写法完全无效，必须手写媒体查询 - 懒加载图片后高度变化不会触发重排，留下大片空白
- 子项若含
position: absolute（比如角标 badge），会脱离列上下文，定位漂移 - 容器加
relative，子项只保留样式类（如p-4 bg-white rounded），移除所有布局类（grid、flex、columns等全删） - 传参时设
columnWidth: 300（单位是像素，不是列数），并必须加percentPosition: true才能兼容md:w-1/2等响应式类 - 图片务必预设宽高，或用
aspect-video/aspect-square，否则 JS 计算高度因未加载失准 - 图片加载完成、内容增删、窗口 resize 后，必须手动调
masonryInstance.layout()——推荐用ResizeObserver，不是window.resize
构建工具（如旧版 Vite 插件）可能不识别自定义类，建议加保底：style="grid-template-rows: masonry"。
立即学习“前端免费学习笔记（深入）”；
columns-3 不是瀑布流，为什么还总有人试
因为它是唯一能纯 CSS、零 JS 实现“多列错落”视觉效果的方式，但代价是语义和交互全面断裂。
columns-3 是为报纸排版设计的切片机制，不是卡片式瀑布流该用的方案。常见问题包括：
仅适合无交互、无图片、高度可预估的静态内容（如词典条目），别用在商品卡或图库上。
vanilla-masonry 是当前最可靠上线方案
放弃“纯类名实现”的执念。JS 方案反而更可控、兼容、可维护，gzip 后仅 ~3KB，无依赖。
初始化要点：
最容易被忽略的兼容性事实
grid-template-rows: masonry 目前仅 Chrome/Edge 116+ 支持，Firefox 和 Safari（合计约 35% 的真实用户）仍完全不支持。这意味着上线后，近三分之一用户看到的是等高网格，而非瀑布流。
别指望用 @supports 检测后 fallback 到 columns-3 —— 两者 DOM 语义、交互逻辑、无障碍支持完全不同，无法平滑降级。真要兼顾，就得从头设计两套结构，成本远超引入一个轻量 JS 库。
