grid-template-rows: masonry 不能直接用于生产环境，因 safari 和 firefox 完全不解析该语法，静默回退为单列布局；chrome 116+ 虽实验支持，但需同时满足显式列定义、无显式定位、明确容器高度等全部硬性条件，缺一则失效。
不能直接用 grid-template-rows: masonry 实现“开箱即用”的生产级瀑布流——它在 Safari 和 Firefox 中静默失效，Chrome 116+ 虽支持但必须满足全部硬性条件，漏一条就退化为单列。
为什么 grid-template-rows: masonry 在多数项目里等于白写
这不是兼容性“不好”，而是语法未被解析：Safari 和 Firefox 遇到该声明会直接忽略整条规则，回退到默认的 grid-auto-flow: row 行流行为，结果所有卡片从上到下堆成一列，视觉完全错乱。@supports (grid-template-rows: masonry) 在这两家浏览器中永远返回 false，无法用于特性检测切换 fallback。
更关键的是，它生效需同时满足：
-
grid-template-columns必须显式写出（如repeat(3, 1fr)），auto-fill或auto-fit会直接禁用 Masonry - 子项不能有任何
grid-row-start、grid-column等显式定位属性 - 容器必须有明确的
height或max-height（仅min-height不够） - 子项内部不能含
float、position: absolute、contain: layout
grid-auto-flow: column + JS 分配才是当前最稳的 Grid 基础方案
Grid 负责列宽、间距和断点；JS 只管把每个元素塞进当前最短列。逻辑清晰、兼容性好、能应对图片加载延迟和字体重排。
-
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))控制列数，auto-fill保留空列占位，避免小屏初加载只出一列 -
grid-auto-flow: column让浏览器按列顺序排列，为 JS 重排打基础 - JS 不靠
order属性（易受 CSS 优先级干扰），直接用appendChild移动 DOM 节点，确保渲染顺序与视觉一致 - 每次插入后必须用
item.getBoundingClientRect().height更新列高，不能用offsetHeight（含边框/滚动条误差）
响应式切换和图片加载是最大落地障碍
真正难的不是写对那两行 CSS，而是让所有图片加载完、窗口 resize 后、断点切换时，布局都不抖、不错位、不截断。
- 监听容器宽度变化，而非
window.resize—— 列数取决于容器宽，不是视口宽；用ResizeObserver更精准 - 图片加载完成（
img.onload）或懒加载触发后，必须重新跑一遍 JS 分配逻辑，否则高度不准导致错位 - 每张图必须用
aspect-ratio占位（Firefox 可 fallback 到padding-top百分比），否则加载前高度为 0，后续内容提前掉进下一列 - 卡片顺序是 DOM 顺序，不是“最短列优先” —— 若需交互直觉匹配，得 JS 预处理数据（如按索引 % 列数分组再拼接）
真正在意瀑布流是否“对齐底部”的人，最后都会回到 JS 动态分配。CSS 的作用，是提供列宽、间隙、断点这些稳定骨架；其余交由 JS 处理高度变化和顺序重排——这才是 2026 年真实项目里最常被忽略、也最难调稳的部分。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
