Firefox 111–113 中 @supports (grid-template-rows: subgrid) 会误判为 true，需配合 JS 校验 getComputedStyle(el).gridTemplateRows 是否为空或 "none"，且基础网格必须写在 @supports 外确保降级可用。
@supports (grid-template-rows: subgrid) 在 Firefox 中会误判
Firefox 111–113 存在已知 bug：@supports (grid-template-rows: subgrid) 会返回 true，即使 layout.css.grid-2 被禁用、subgrid 实际未启用。仅靠这条检测，旧版 Firefox 会错误应用 subgrid 样式，导致子项错位或布局塌陷。
必须搭配 JS 运行时校验：getComputedStyle(el).gridTemplateRows 若返回空字符串或 "none"，说明 subgrid 未激活。不能只信 CSS 解析阶段的声明判断。
- 不要把降级逻辑全塞进
@supports (grid-template-rows: subgrid)块里——Firefox ≤110 直接忽略整条规则，无 fallback 可言 - 推荐结构：先用
@supports (display: grid)包裹基础网格，再在外层单独写非 subgrid 的回退方案（如显式grid-row: 2 / 4） - 避免嵌套
@supports检测 subgrid + gap，Safari ≤14.1 会静默跳过整个块
Subgrid 检测必须用完整声明对，不能偷懒
@supports (display: subgrid) ❌ 不合法 —— subgrid 不是 display 的取值；@supports (grid-row: subgrid) ❌ 语法无效 —— subgrid 只能出现在 grid-template-rows 或 grid-template-columns 中。
唯一合规写法是：@supports (grid-template-rows: subgrid) 或 @supports (grid-template-columns: subgrid)。注意括号内必须是完整声明对，且值必须是字面量 subgrid，不能带单位、函数或变量。
- Chrome 116 支持
display: grid却不支持subgrid，所以不能靠display: grid推断 subgrid 可用 - Safari 16.4+ 才开始支持 subgrid，且仅限
grid-template-rows/columns；此前版本连该检测都会静默丢弃 - IE11 完全不识别
@supports语法本身，整条规则被跳过，外部降级样式必须是它能解析的（如float或-ms-grid）
Subgrid 降级不能只靠 @supports 块内部覆盖
常见错误是把基础 Grid 和 subgrid 增强都写进同一个 @supports 块，例如：
@supports (display: grid) {
.parent { display: grid; grid-template-rows: 40px 1fr 60px; }
@supports (grid-template-rows: subgrid) {
.child { grid-template-rows: subgrid; }
}
}
这样写，Firefox ≤110 和 Safari ≤15.6 会直接跳过外层 @supports，导致 .parent 都没设成 grid，整个布局退化为 display: block。
- 正确做法：基础网格（
display: grid+ 显式行列）必须写在最外层、@supports块之外，确保所有支持 Grid 的浏览器都能拿到底线布局 - subgrid 增强只包在独立的
@supports (grid-template-rows: subgrid)块中，且只改grid-template-rows/columns和依赖它的属性 - 所有子项的定位（如
grid-row）必须兼容两种模式：subgrid 激活时靠父容器隐式线，不激活时靠显式数值线（如grid-row: 2 / 4）
移动端和微信 X5 环境下 subgrid 几乎不可用
iOS Safari ≤16.3、Android WebView ≤80、微信 X5 v7.0.23 前均不支持 subgrid，且 @supports (grid-template-rows: subgrid) 会被静默丢弃——不是返回 false，而是整条规则不参与解析，连 fallback 都不会触发。
这意味着你写的降级样式如果只藏在 @supports 外部、又没配显式行列定位或包装容器模拟，页面在这些环境里就会出现内容堆叠、高度坍缩等不可控问题。
- 必须为每个使用 subgrid 的子项提供显式
grid-row/grid-column回退值（如grid-row: 2），而非依赖span 3或subgrid - 避免用
grid-area或justify-content等依赖 subgrid 上下文的属性做降级，它们在非 subgrid 模式下行为不可预测 - 真正安全的渐进增强结构是：基础流用显式行列控制 → subgrid 仅用于简化重复定义 → 所有视觉差异靠独立 class 控制（如
.supports-subgrid .child）
复杂点在于：@supports 的判断发生在 CSS 解析阶段，它不检查父容器是否已声明 display: grid，也不保证子项的 grid-row 能映射到 subgrid 的隐式轨道。写完必须在真机上验证 Safari、Firefox 和微信 X5 的渲染结果，不能只看 DevTools 手动 toggle 样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
