纯 css grid 无法实现真正按列高动态分配的瀑布流，因 masonry 布局未被主流浏览器稳定支持，grid-auto-flow: dense 仅填空不重排，且存在可访问性、响应式及图片加载等实际问题；可靠方案是 grid + js 动态分发。

纯 CSS Grid 无法实现真正按列高动态分配的瀑布流，grid-template-rows: masonry 虽已进入规范，但生产环境不可用——Firefox/Safari 完全不识别，Chrome/Edge 仅 116+ 实验性支持，写上去等于白写，部分旧 WebView 直接渲染空白。

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

它只负责“填空”，不是“重排”。浏览器会把矮卡片塞进前面高卡片留下的空隙里，但前提是：所有卡片高度必须在布局计算前就确定。而实际项目中图片异步加载、字体回流、行高变化都会导致高度动态变化，dense 不会重新评估列高，也不会移动已定位元素。

• DOM 顺序不变，但视觉顺序被打乱 → 键盘 tab 和屏幕阅读器跳序，可访问性风险真实存在
• 和 grid-row-start/grid-row-end 手动设置混用时，dense 自动填充逻辑会被直接忽略
• auto-fill 和 auto-fit 行为差异极大：auto-fill 预留所有可能列槽位，是错落感的前提；auto-fit 会收缩空列，导致首屏只显示 1 列，滚动后突然多出几列，体验割裂

grid-auto-rows 设成 auto 还是固定值？

设成 auto 看似合理，但在旧版 Chromium 中常失效；设成固定值（如 200px）又会导致矮卡片底部留白、高卡片被裁剪。正确做法是用最小兜底 + 内容自撑：grid-auto-rows: 100px auto。

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

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

下载

• 100px 防止极矮卡片（比如纯文字短条目）塌陷成一条线
• auto 允许图片、长文本等内容自然撑开高度，避免截断或换行异常
• 别用 fit-content —— 它在 grid-auto-rows 里完全不生效

图片底部多出 4px 空白？不是 Grid 的锅

这是 <img> 默认为 inline 元素、按基线对齐（vertical-align: baseline）导致的，Grid 容器再怎么调也解决不了。

• 可靠解法只有两个：img { display: block }，或统一设父容器 font-size: 0，再在卡片内重置字体大小
• 千万别用 margin-bottom: -4px 修补——不同字号、不同字体下这个像素值会变，维护成本高且不可靠
• 这个老问题在 Grid 布局里依然存在，且容易被误认为是 Grid 自身缺陷

真正能落地的方案：Grid + JS 动态分发

Grid 控制列宽、间距和响应式断点，JS 只管“往哪一列塞”。核心是维护一个列高数组，每次插入前找最短列索引，插入后更新该列高度。

• 容器设 grid-auto-flow: column，列数由 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 控制
• 用 getBoundingClientRect().height 获取真实高度（比 offsetHeight 更准，避开渲染抖动）
• 插入方式选 appendChild 比设 order 更可靠——后者依赖渲染顺序，resize 后容易错位
• 响应式重排必须监听容器宽度变化（ResizeObserver），不是窗口；图片加载完成（img.onload 或 img.decode()）后也得重跑分配逻辑

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

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