chrome 117+/firefox 119+/safari 17.4+ 支持 grid-template-rows: masonry 实现真瀑布流，但需满足硬性前提：显式定义列（禁用 auto-fill/auto-fit）、子项无手动定位、图片需 aspect-ratio 占位防错位。
能，但必须用 grid-template-rows: masonry，且只在 Chrome 117+ / Firefox 119+ / Safari 17.4+ 有效；旧写法（如 grid-auto-flow: dense 或 grid-row: span N）根本不是瀑布流，只是错觉。
为什么 grid-auto-flow: row + minmax() 不是瀑布流
它生成的是等高行布局：每行高度由该行最高卡片决定，后续卡片不会“沉”到左侧更短列的底部。视觉上是整齐的阶梯状，留白明显，和 Pinterest 完全不同。
- 典型错误写法：
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))); grid-auto-flow: row; -
grid-auto-rows: min-content或fit-content无效——Grid 轨道不支持列级独立伸缩 - 即使加了
grid-auto-flow: dense，也只是把小卡片往前塞，不改变列高对齐逻辑
grid-template-rows: masonry 的硬性前提
这个特性不是“开了就灵”，漏掉任一条件都会退化为普通 Grid 行布局。
- 必须显式定义列，例如：
grid-template-columns: repeat(3, 1fr)或grid-template-columns: 300px 300px 300px；auto-fill/auto-fit会直接禁用 Masonry - 绝对不能出现
grid-row、grid-row-start、grid-row-end等手动定位声明，否则 Masonry 自动失效 - 所有卡片必须是容器的**直接子元素**；嵌套
display: flex或display: grid的子容器会干扰列高测量
图片加载与响应式切换时的错位怎么救
Masonry 布局对 DOM 高度变化不敏感，图片异步加载、字体回流、断点切换都可能造成初始错位或卡顿。
- 用
aspect-ratio占位：img { aspect-ratio: 4/3; width: 100%; height: auto; }；Safari 旧版 fallback 用padding-top: 75%+ 绝对定位 - 新增卡片后强制重绘：
element.style.transform = 'scale(1)'或container.scrollIntoView({ block: 'nearest' }) - 监听图片加载：
img.addEventListener('load', () => { container.style.display = 'grid'; setTimeout(() => container.style.display = '', 0); })（Safari 中最稳定） - 服务端返回数据时附带宽高比，用于 CSS 占位：
grid-auto-rows: minmax(0, calc(100vw / 3 * 0.75))
真正难的不是写出那三行 Masonry CSS，而是让图片加载、字体渲染、响应式断点这三件事不互相打架——它们任何一个出问题，Masonry 就会“卡住”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
