纯css grid无法实现真正瀑布流，因静态轨道与各列独立堆叠需求不兼容；grid-template-rows: masonry属level 3且仅chrome/edge 116+支持，firefox/safari不识别；grid-auto-flow: dense仅为视觉近似，依赖固定高度假设，易因图片加载、字体渲染等错位；可靠方案仅有column-count + break-inside或grid + js动态分发。

grid-template-rows: masonry 不能在生产环境用，目前只有 Firefox Nightly 和 Chrome 116+ 实验性支持，Safari 和主流稳定版 Firefox 完全不识别，写上去等于白写，页面可能直接空白。

为什么 grid-auto-flow: dense 不是瀑布流解法

它只负责“填空”，不是“重排”。你得先手动给每个 .item 设好 grid-row-start 和 grid-row-end，它才去补那些被跳过的格子；而瀑布流要求元素自动下坠到最短列——Grid 的轨道是静态的，dense 不会动态拉伸列高，也不会移动已定位的元素。删掉它反而更可控。

真正能落地的 Grid + JS 组合方案

核心是：Grid 控制列宽和间距，JS 负责把每个元素塞进当前最短列，并更新列高记录。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• display: grid 容器设 grid-auto-flow: column，列数由 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 控制
• 初始所有 .item 按 DOM 顺序排列，JS 遍历它们，用 getBoundingClientRect().height 获取真实高度（比 offsetHeight 更准，避开渲染抖动）
• 维护一个数组 columns = [0, 0, 0] 记录每列当前总高，每次插入前找最小值索引，插入后更新该列高度
• 插入方式选 appendChild 比设 order 更可靠：后者依赖渲染顺序，resize 后容易错位；前者直接改 DOM 位置，重排确定

响应式重排必须防抖 + 监听容器而非窗口

只监听 window.resize 是错的——列数变化取决于容器宽度，不是视口。正确做法：

• 用 ResizeObserver 监听 Grid 容器的宽度变化
• 变化触发后，用 setTimeout(..., 0) 或 requestAnimationFrame 延迟执行重排，等布局稳定再算列高
• 图片加载完成（img.onload）或懒加载触发后，也得重新跑一遍分配逻辑，否则高度不准导致错位

实际项目里，列高计算精度、图片异步加载、字体回流这三件事最容易漏掉——它们不报错，但会让瀑布流看起来“歪了”或者“卡住”。

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