subgrid 是 CSS Grid Level 2 新增特性，Level 1 解析器完全忽略它，导致子容器退化为普通块级元素；需手动启用实验开关、严格运行时检测（getComputedStyle）、并为孙子层提供完整降级方案。
subgrid 不是 Level 1 的遗漏，而是 Level 2 才引入的全新语法特性。Level 1 解析器压根不认识 subgrid 这个值，写了就丢，不报错、不降级、不 fallback——子容器直接退化为普通块级元素，布局当场错乱。
为什么 Level 1 完全不解析 subgrid
Level 1 和 Level 2 不是版本迭代关系，而是两套独立的 CSS Grid 解析能力。浏览器启用 Level 2 需手动开启实验性开关（如 Firefox 的 layout.css.grid-2），且必须彻底重启进程。Level 1 引擎在词法分析阶段就跳过所有含 subgrid 的声明，连进入样式计算的机会都没有。
-
grid-template-columns: subgrid在 Level 1 下返回空字符串或"none"，不是"subgrid" -
@supports (grid-template-columns: subgrid)在 Chrome 114 及更早、Safari 17.3 及更早中根本无法识别该语法，整块@supports会被忽略 - 即使你写了
display: grid+grid-template-columns: 1fr 2fr，只要子元素用grid-template-columns: subgrid，它就不再是网格容器，而是一个普通div
用 getComputedStyle 真实检测是否生效
别信 DevTools 的「Computed」面板——它对不识别的 subgrid 声明不做任何提示，可能显示继承值或空白。唯一可靠方式是 JS 运行时验证：
- 执行
getComputedStyle(el).gridTemplateColumns === 'subgrid'，仅当返回严格等于'subgrid'才算真正启用 - 若返回空字符串、
"none"或其他值，说明 Level 2 未启用或浏览器不支持 - Firefox 还需确认
about:config中layout.css.grid-2和layout.css.grid-template-subgrid-value.enabled均为true，且已杀掉全部进程后重启
兼容旧浏览器必须覆盖到孙子层
常见错误是只给父容器加 fallback，却忘了 subgrid 失效后，原本靠它对齐的“孙子元素”会彻底脱离网格流。降级必须穿透两层：
- 父容器保持
grid-template-columns: 120px 1fr（建议用 CSS 变量统一，如--cols: 120px 1fr） - 子容器（即本该设
grid-template-columns: subgrid的那个）改用display: grid+ 显式复制列定义：grid-template-columns: var(--cols) - 子容器的每个直系子代（孙子）必须手动写
grid-column: 1或grid-column: 2，不能依赖自动分配 - 若父列数是动态的（如
repeat(auto-fit, minmax(200px, 1fr)))），fallback 中必须转为固定列数（如repeat(3, 1fr)），否则无法对齐
更稳的写法：优先用 grid-column: subgrid 而非 grid-template-columns: subgrid
grid-column: subgrid 生效条件更宽松，只要子元素是父网格的**直系网格项**（即已通过 grid-column 或 grid-area 被定位），就能复用父列轨道。它不要求子元素自身是网格容器，避开了 display: contents 导致上下文丢失的问题。
立即学习“前端免费学习笔记（深入）”；
- 父容器：设
display: grid+ 显式grid-template-columns - 子元素（直系）：先用
grid-column: 1 / -1占满整行，成为网格项 - 孙子元素：直接设
grid-column: subgrid（此时它继承的是父容器的列轨道） - 不支持时，孙子元素退化为块级流 → 必须为它们单独写降级规则，例如
grid-column: 1+width: 120px
gap、justify-items、align-content 等容器级样式——这些仍需在子容器上显式设置，且 fallback 时也得一并处理。 
