chrome 132+/firefox 130+ 原生支持 grid-template-rows: masonry，但必须同时满足：显式 grid-template-columns、禁用所有行定位属性、容器有明确 height/max-height；safari 18 仍不支持，ssr 环境会丢弃该声明。
Chrome 132+ 中启用 grid-template-rows: masonry 的前提条件
必须同时满足三项硬性约束，缺一不可：显式定义列（grid-template-columns）、禁用行方向手动定位、确保容器有明确的 display: grid 声明。只写 grid-template-rows: masonry 会静默失效，浏览器当作无效值忽略。
-
grid-template-columns必须存在且非none（例如repeat(auto-fill, minmax(250px, 1fr)))），不能依赖grid-auto-columns - 完全禁止使用
grid-row-start、grid-row-end、grid-row等显式行定位属性，否则降级为普通 Grid -
grid-auto-rows不生效，也不能设为固定值；行高完全由内容驱动，不能预设 - 必须搭配
break-inside: avoid防止卡片被列断开，否则会出现截断或错位
Firefox 130+ 的兼容细节与常见误判
Firefox 130+ 已稳定支持 grid-template-rows: masonry，但 UA 字符串中可能不包含明确版本号，仅靠 navigator.userAgent 判断易出错。更可靠的方式是运行 JS 检测 + 版本兜底。
- 用
CSS.supports('grid-template-rows', 'masonry')检测，比@supportsCSS 规则更准——某些旧版 Chrome 会假阳性返回 true - Firefox 移动版（Fenix）仍基于 GeckoView，需确认其内核版本 ≥ 130，部分安卓渠道包可能滞后
- 不要在 SSR 环境中直接渲染 masonry 样式：服务端无法识别该值，会丢弃声明，导致首屏回退为单列
Safari 和 WebView 的真实支持状态
Safari 18 仍未实现 grid-template-rows: masonry，官方文档和 WebKit Bugzilla 均无落地迹象。所有 iOS/iPadOS 设备、macOS Safari、以及绝大多数安卓 WebView（包括 Chromium 119 及更早内核）均不支持。
- 别信“Safari 技术预览支持”的旧消息：CSS Grid Lanes（
display: grid-lanes）是另一套实验方案，与 masonry 无关，且仅限 Safari TP 234+，未进正式版 - 检测时加 UA 判断：若匹配
Safari/且无Version/19以上标识，直接走降级逻辑 - 用
display: grid+order动态分配的 JS 降级方案，比column-count更可控——前者复用同一 DOM，后者会破坏 tab 顺序和焦点流
响应式列数切换时的布局抖动问题
当 grid-template-columns 随视口变化而重算（如从 3 列变 2 列），masonry 容器会触发完整重排，已渲染的项位置全部刷新，视觉上出现明显跳动。这不是 bug，而是当前规范下 unavoidable 的行为。
- 避免在
resize事件中频繁修改列定义；优先用minmax()+auto-fill让浏览器自动调节列数 - 添加
transition: all 0.2s ease对容器无效（masonry 不触发重绘动画），但可对子项加opacity或transform微调入场感 - 若业务允许，列数变更时配合
getComputedStyle捕获旧高度，用scroll-behavior: smooth缓解滚动突兀感
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
