chrome截至2026年8月仍不支持subgrid，需手动开启flag且不默认启用；firefox 117已默认稳定支持，需验证getcomputedstyle返回"subgrid"并确认grid overlay轨道线贴合。
subgrid 在 Firefox 117 中和 Chrome 表现不同，根本原因不是“Firefox 又出 bug”，而是 Chrome 当前根本不支持 subgrid——截至 2026 年 8 月，Chrome（含 Edge）仍处于实验性支持阶段，需手动开启 flag 且不默认启用；而 Firefox 117 是已默认开启、稳定可用的首个主流版本。
Firefox 117 的 subgrid 已默认启用，Chrome 还没过“出厂门”
Firefox 自 111 版本起实验性支持 subgrid，112+ 默认开启，117 是成熟落地版本：
-
layout.css.grid-2和layout.css.grid-template-subgrid-value.enabled两个开关在 117 中均为 true 且无需手动干预 -
getComputedStyle(el).gridTemplateColumns返回"subgrid"（非空字符串或"none"） - DevTools Layout 面板能正确绘制子网格轨道线
Chrome（包括 Chromium 128）目前仍要求：
- 地址栏输入
chrome://flags/#enable-experimental-web-platform-features→ 启用该 flag - 完全重启浏览器（仅刷新标签页无效）
- 即使启用，
@supports (grid-template-columns: subgrid)仍可能返回 false，且部分嵌套场景（如grid-auto-flow: column+subgrid）会静默降级
所以你看到的“差异”，大概率是：Firefox 真跑了
subgrid，Chrome 根本没跑，退成了普通 grid 或 display: block。
验证 subgrid 是否真生效，别信 @supports
@supports (grid-template-rows: subgrid) 在 Firefox 111–113 有误报 bug，虽 117 已修复，但 Chrome 压根不识别该检测，直接跳过整个规则块。真实验证只有一条路径：
- 给子元素加
outline: 1px solid red - 打开 DevTools → Layout → 勾选
Grid overlay - 观察 outline 是否严格贴合父网格的列/行线
- 若 outline 漂移、错位，或 Grid overlay 不显示子元素轨道 →
subgrid未触发
同时运行 JS 检查：
const el = document.querySelector('.child-grid');
console.log(getComputedStyle(el).gridTemplateColumns); // Firefox 117: "subgrid", Chrome: "" 或 "none"
subgrid 失效时最常被忽略的三个硬性条件
即使写法完全正确，以下任一条件不满足，Firefox 117 也会静默丢弃 subgrid：
- 父容器未声明
display: grid（注意：不能是inline-grid，也不能被!important覆盖） - 子元素未显式设置
grid-column或grid-row跨越父网格轨道（例如grid-column: 1 / -1） - 父网格使用了
grid-template-areas但子元素未匹配命名区域，或区域字符串存在末尾空格（Firefox 会整行跳过）
尤其注意第三点：写
grid-template-areas: "header header";没问题，但"header header "（末尾多一个空格）在 Firefox 中会导致subgrid失效，Chrome 却容忍。
真正难处理的不是“怎么写对”，而是“怎么确认它正在运行”——Firefox DevTools 的 Computed 面板对无效 subgrid 不报错、不划删、不提示，只安静地当它不存在。动手前先跑验证逻辑，比反复调样式更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
