firefox 111+ 才真正支持 subgrid，低于该版本会静默忽略；需同时启用 layout.css.grid-2 和 layout.css.grid-template-subgrid-value.enabled 两个 about:config 开关，并完全重启浏览器，且须用 getcomputedstyle 验证 gridtemplaterows 是否返回 "subgrid" 而非空字符串或 "none"。
Firefox 111+ 才真正支持 subgrid，低于该版本的任何写法都会被静默忽略——不是“没对齐”，而是压根没进解析流程。
Firefox 版本与 subgrid 支持的硬性分界线
Firefox 在 111 版本（2023 年 3 月发布）中首次启用 subgrid 实验性支持，并在 112+ 中默认开启。但关键点在于：layout.css.grid-template-subgrid-value.enabled 和 layout.css.grid-2 这两个 about:config 开关必须同时为 true，否则即使版本达标，subgrid 也不会生效。
- 检查方法：在地址栏输入
about:config→ 搜索layout.css.grid-2，确认值为true - 再搜索
layout.css.grid-template-subgrid-value.enabled，若不存在或为false，需手动新建/切换为true - 改完不重启浏览器？不行——必须完全关闭所有 Firefox 窗口后重开，否则 CSS 引擎不会重新加载 Grid Level 2 解析器
@supports 检测 subgrid 时 Firefox 的行为陷阱
@supports (grid-template-rows: subgrid) 在 Firefox 111–113 中存在一个已知 bug：它会错误返回 true，即使 subgrid 实际被禁用（比如 layout.css.grid-2 是 false）。这意味着仅靠 @supports 判断不可靠。
- 真实兼容性检测必须结合 JS：读取
getComputedStyle(el).gridTemplateRows，若返回空字符串或"none"，说明subgrid未激活 - 不要把降级样式全塞进
@supports块里——Firefox 旧版（≤110）不识别该规则，会直接跳过整个块，导致无 fallback - 推荐结构：
@supports (display: grid) { ... }包裹基础 Grid；再在外层写独立的非subgrid回退规则，确保所有 Firefox 都能执行到
subgrid 失效却看不出报错？这是 Firefox DevTools 的隐藏坑
Firefox 开发者工具在「Computed」面板中，对不识别的 grid-template-rows: subgrid 不做任何标记——既不划掉，也不显示初始值。你看到的可能是上一层继承来的值，或干脆是空，容易误判为“样式没加进去”。
- 验证是否真生效：给子元素加
outline: 1px solid red，再打开「Layout」面板 → 勾选「Grid overlay」，看红色 outline 是否严格贴合父网格线 - 若 outline 漂移、错位，或 Grid overlay 根本没显示子元素轨道线，基本可断定
subgrid未触发 - 特别注意：父容器用了
display: contents时，子元素会脱离网格上下文，subgrid必然失效——Firefox 不报错，但布局彻底崩
真正难处理的不是“怎么开”，而是“开了之后怎么确认它真的在跑”。Firefox 对 subgrid 的支持仍处于精细控制阶段：开关要手动开、版本要卡死、检测要双保险、调试要绕过 DevTools 的视觉误导。漏掉任意一环，都可能让布局在用户端静默降级成一团乱麻。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
