Firefox 110+ 原生支持 CSS Subgrid但需手动启用layout.css.grid-2和layout.css.grid-template-subgrid-value.enabled两个about:config配置项，否则subgrid值不解析。
Firefox 110+ 已原生支持 CSS Subgrid，但默认不启用 Grid Level 2 的子网格能力，必须手动开启两个关键配置项才能实际使用 subgrid 值。
确认 Firefox 版本是否达标
Subgrid 在 Firefox 中从 110 版本起进入稳定实现阶段，但早期 110–115 构建中仍属实验性。低于 110 的版本（如 ESR 102）完全不识别 subgrid，会静默降级为 auto。
- 打开
about:support，查看“版本”字段，确保 ≥110.0；若为102.x或更低，请升级到当前稳定版（2026 年 5 月最新为124.0） - 无需 Nightly —— 稳定版已足够，但必须手动开启底层开关，否则 DevTools 里能看到网格线，
grid-template-columns: subgrid却不生效
必须启用的两个 about:config 配置项
仅开启 layout.css.grid-2 不够，它只控制 Grid Level 2 整体框架；真正让 subgrid 关键字被解析的是 layout.css.grid-template-subgrid-value.enabled。两者缺一不可。
- 访问
about:config→ 点击“接受风险并继续” - 搜索并设为
true：layout.css.grid-2（若不存在，右键新建布尔值） - 再搜索并设为
true：layout.css.grid-template-subgrid-value.enabled（这是 Subgrid 解析器的独立开关） - 关闭页面，无需重启浏览器，刷新测试页即可立即生效
验证 Subgrid 是否真正在工作
光看样式没报错不等于 Subgrid 在运行——很多开发者误以为 display: grid + grid-template-columns: subgrid 写对了就行，但 Firefox 会悄悄 fallback 到普通网格，且不报错。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → 选中子网格元素 → 切换到“布局”面板 → 查看“网格叠加层”，若显示两层重叠网格（父网格线 + 子网格线对齐），说明 Subgrid 成功激活
- 在控制台执行：
getComputedStyle(document.querySelector('.child')).gridTemplateColumns，返回值应为"subgrid"，而非"none"或空字符串 - 尝试写
grid-column: 1 / -1跨越父网格所有列，若子元素内容真正按父轨道对齐（比如多张卡片底部自动拉齐），才是 Subgrid 生效的实证
常见失效原因与绕过方式
即使配置全开，Subgrid 仍可能因 DOM 结构或 CSS 层级问题失效，这类问题往往难以定位。
-
subgrid只作用于**直接子元素**：父容器是display: grid，子元素必须是其**直系后代**，中间不能插div包裹层，否则继承链断裂 - 避免和
grid-template-areas混用：若父网格用了命名区域，子网格中用grid-area定位时，需确保名称在父级定义过，否则静默失败 - Flexbox 容器内嵌 Grid 子元素？不行：Subgrid 要求父级必须是
display: grid，且子元素自身也必须声明display: grid，否则不触发子网格逻辑 - 如果仍不生效，临时加一句
grid-auto-flow: dense到子元素上，可暴露部分解析异常（Firefox 旧构建中该属性会强制触发子网格重计算）
最易被忽略的一点：Firefox 对 Subgrid 的 track 名称继承非常严格——父网格定义了 grid-template-rows: [header] auto [main] 1fr [footer] auto，子网格中写 grid-row: footer 才有效；写 grid-row: footer / -1 就可能断掉，因为 -1 是隐式索引，而 Subgrid 的隐式线不继承。
