firefox 111+ 才真正支持 subgrid，旧版本静默忽略；必须同时启用 layout.css.grid-2 和 layout.css.grid-template-subgrid-value.enabled 两个 about:config 开关并完全重启浏览器，且需用 getcomputedstyle 验证 gridtemplaterows 是否返回 "subgrid"。
Firefox 111+ 才真正支持 subgrid，旧版本静默忽略
如果你在 Firefox 中看到 Grid 间隙异常，先检查是否用了 subgrid。Firefox 在 111 版本（2023 年 3 月发布）才首次启用实验性支持，且必须同时开启两个 about:config 开关：layout.css.grid-2 和 layout.css.grid-template-subgrid-value.enabled，缺一不可。改完不完全重启浏览器？无效——所有窗口必须关闭后重开，否则 Grid Level 2 解析器不会加载。
更隐蔽的是：@supports (grid-template-rows: subgrid) 在 Firefox 111–113 存在 bug，会错误返回 true 即使开关未启用。真实检测要用 JS：getComputedStyle(el).gridTemplateRows 返回空字符串或 "none"，就说明 subgrid 没生效。
gap 在 Safari 和旧 Edge 中解析不一致
gap 在 Chrome 66+、Firefox 63+ 基本稳定，但 Safari 14.0 及更早版本只认 row-gap 和 column-gap 分开写，不支持 gap: 12px 8px 这种双值简写；Edge 16–18 虽标称支持，实测存在行高塌陷问题——比如文字底部被截断、网格项垂直居中偏移。
稳妥写法是显式声明：row-gap: 12px; column-gap: 12px;，而非依赖 gap: 12px。PostCSS 插件 postcss-gap-properties 可自动补全旧语法，但它无法修复 IE 或 Safari 的渲染偏差，仅解决语法层面兼容。
grid-template-rows 的 minmax() 与 item height 冲突导致视觉错位
常见现象：Chrome 看着紧凑，Firefox 里网格项上下“漂浮”出额外空白。根源常是 grid-template-rows: repeat(auto-fit, minmax(25rem, 1fr)) 定义了最小行高 25rem，而子项 height: 20rem 固定，又没配 align-items。Firefox 默认 align-items: stretch 会拉伸子项填满轨道，但若内容高度不够，它可能保留内部对齐逻辑差异，造成顶部/底部留白不一致。
解决方式不是调 gap，而是统一尺寸逻辑：
- 删掉子项的
height，让其自然撑开或用min-height - 或把
minmax()的最小值设为与内容实际高度匹配（如minmax(20rem, 1fr)） - 显式设置
align-items: start或center，避免浏览器默认行为差异
gap 和 margin 混用在不同引擎下叠加表现不同
给 Grid 容器设了 gap: 12px，又给某个子项加 margin-bottom: 8px，Chrome 可能渲染为 12px + 8px = 20px，Firefox 却因 margin 折叠规则或盒模型计算顺序不同，出现 12px 或 8px——这不是 bug，而是两者对“非 Grid 原生间距”的处理路径不同。
根本原则：Grid 项的间距只用 gap 控制，所有子项的 margin 必须重置为 0。需要局部留白？用 grid-row 跨轨道、加空占位项，或包裹一层内联容器再设 margin。
容易被忽略的是：gap 不继承、不传播，也不和 padding 抵消。如果父容器有 padding，子 Grid 有 gap，它们是并存关系，不是叠加失效——视觉上“间隙变大”，其实是两层空间叠加，不是 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
