纯 css grid 瀑布流不可靠，因 grid-template-rows: masonry 仅 chrome/edge 116+ 支持，firefox/safari 不识别，且需严格满足高度、无绝对定位等条件；columns-3 会切片内容，破坏交互与可访问性；可靠方案是 grid-auto-flow: column 配合 js 动态分配元素至最短列，并精确测量高度。

纯 CSS Grid + Tailwind 无法在生产环境实现可靠瀑布流，grid-template-rows: masonry 仅 Chrome/Edge 116+ 支持，Firefox 和 Safari 完全不识别该语法，且生效条件严苛到几乎不可控。

为什么 grid-rows-masonry 在 Tailwind 中基本等于摆设

即使你在 tailwind.config.js 中手动扩展了 gridTemplateRows: { masonry: 'masonry' }，并写上 grid grid-cols-3 grid-rows-masonry gap-4，以下任一情况都会导致静默失效：

• grid-cols-3（即 repeat(3, minmax(0, 1fr))）含 fr 单位 → Chrome 直接忽略 masonry，回退为单列流
• 容器没设明确 height 或 max-height → masonry 不触发，布局坍缩为普通行排列
• 子项内有 position: absolute、float 或 contain: layout → 浏览器放弃计算真实高度，列高失准
• @supports (grid-template-rows: masonry) 在 Safari/Firefox 中永远返回 false，无法做有效降级判断

用 grid-auto-flow: column + JS 才是真正可落地的方案

Tailwind 只管列宽与断点，JS 负责把每个元素塞进当前最短列。逻辑清晰、兼容所有浏览器，且能应对图片加载延迟和字体重排。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• grid-cols-[repeat(3,minmax(300px,1fr))]：显式写死列定义，避免 auto-fill 干扰 masonry 检测（哪怕不用它）
• grid-auto-flow: column：让浏览器按列顺序填充，为 JS 移动 DOM 提供稳定初始顺序
• JS 不用 order 属性（易被 CSS 优先级覆盖），直接用 appendChild 移动节点，确保视觉顺序与 DOM 一致
• 每次插入后必须调 item.getBoundingClientRect().height 更新列高，offsetHeight 含边框误差，不准

columns-3 为什么绝对不能用于卡片瀑布流

它不是“错落”，是“切片”——浏览器按固定列高暴力截断内容，对卡片类交互场景完全不适用。

• 图片会被从中间劈开，break-inside: avoid 只能缓解，不能根治
• 点击区域错位：DOM 顺序是 1→2→3→4，视觉上却显示为列1:1,4 / 列2:2,5 / 列3:3,6，键盘导航和屏幕阅读器断裂
• md:columns-3 这类响应式写法无效，columns 不支持断点切换，必须手写媒体查询
• 懒加载图片后高度变化，不会触发重排，留下大片空白，需额外监听 load 事件手动 column-count 重置

真正上线前必须检查的三个细节

很多项目卡在最后一步：样式写了、JS 加了、列数也对了，但瀑布流还是歪的。问题往往出在内容层。

• 图片必须加 img { display: block; width: 100%; height: auto; }，否则 vertical-align: baseline 会多出 4px 空白，列高累计误差放大
• 若需裁剪，父容器（如 <figure></figure>）必须设 aspect-ratio: 4/3 + object-fit: cover；只写 width: 100% 不控高，图片拉伸变形会干扰 JS 高度测量
• gap-4 必须作用于 Grid 容器本身，别在子项上写 mb-4 或 mr-4 —— margin 会参与布局计算，破坏列轨道推算，尤其在响应式重排时

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！