Subgrid 在现代浏览器中不支持是因为属于 Grid Level 2 规范，Chrome 115+、Firefox 111+、Safari 17.4+ 才真正支持；此前版本完全不识别 grid-template-rows: subgrid，解析器直接跳过，getComputedStyle 返回空或 "none"，降级必须绕过该盲区并配合 JS 校验。
Subgrid 在“现代浏览器”中不支持，不是因为厂商懒，而是它属于 Grid Level 2 规范，各浏览器启用节奏不同——Chrome 115+、Firefox 111+、Safari 17.4+ 才真正落地；此前所有版本（包括 Chrome 114、Firefox 110、Safari 16.x）压根不识别 grid-template-rows: subgrid 这类声明，解析器直接跳过，getComputedStyle(el).gridTemplateRows 返回空字符串或 "none"，不是“没效果”，是“没看见”。降级必须绕过这个盲区。
@supports (grid-template-rows: subgrid) 在 Firefox 111–113 中会误判
Firefox 111–113 存在已知 bug：@supports (grid-template-rows: subgrid) 恒返回 true，哪怕 layout.css.grid-2 被手动关掉。只靠这条 CSS 检测，旧版 Firefox 会错误应用 subgrid 样式，导致子项错位或布局塌陷。
- 必须搭配 JS 运行时校验：
getComputedStyle(el).gridTemplateRows若为空或"none"，说明 subgrid 实际未激活 - 不能把基础网格定义塞进
@supports (grid-template-rows: subgrid)块里——Firefox ≤110 直接忽略整条规则，父容器连display: grid都不会设 - 推荐结构：先用
@supports (display: grid)包裹基础网格轨道定义，再在外层单独写非 subgrid 的回退规则（如显式grid-row: 1 / 4）
subgrid 降级不能只靠 @supports 块内部覆盖
常见错误是把父容器网格和子元素 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 保持 display: block，整个布局退化。
立即学习“前端免费学习笔记（深入）”；
- 降级样式必须写在所有
@supports外层，且语法要兼容老浏览器（如用float或display: inline-block） - 父容器的
grid-template-rows必须显式定义（不能是auto-fit动态生成），否则即使支持 subgrid 也无轨可依 - 不支持时，子元素需手动匹配轨道数，例如父设了
grid-template-rows: 40px 1fr 60px，子就得写grid-row: 1 / 4
display: contents 会让 subgrid 彻底失效
在组件封装中，常有人给 wrapper 加 display: contents 想让它不占渲染空间，但此举会让 wrapper 的子元素脱离原始网格上下文——它们的父节点不再是定义了 grid-template-rows 的容器，subgrid 直接失去作用源。
- 检查 DOM 层级，确保 subgrid 元素的**直接父元素**就是那个设了
grid-template-rows或grid-template-columns的容器 - 避免在父容器和 subgrid 元素之间插入
display: contents、display: none或 Shadow DOM 边界 - 若必须封装，改用
grid-row/grid-column显式定位子元素，而非依赖 subgrid 继承
最易被忽略的点是：subgrid 不是“自动对齐开关”，它依赖父容器明确的轨道定义 + 子元素直系关系 + 浏览器真实解析能力。JS 校验 gridTemplateRows 返回值比任何 @supports 都可靠，而降级路径必须独立存在、不依赖任何新特性解析结果。
