CSS subgrid 的兼容性降级处理，不能只依赖一个 @supports 代码块来兜底。原因很直接：Firefox 111–113 会把它错误判断为 true，Chrome 114 及更早版本，以及 Safari 17.4 之前，则会直接忽略整段规则；至于 IE11，更是会完整跳过。因此，降级样式必须写在 @supports 外层，并且采用兼容性更稳妥的写法，例如用 margin 替代 gap。同时，父级轨道需要显式进行静态定义，并通过 CSS 变量统一维护；孙子元素也不能省略，必须手动定位。最后，页面是否真正启用了 subgrid，不能靠猜测，必须通过 JS 检测 getComputedStyle(el).gridTemplateColumns 是否严格等于 'subgrid' 来确认。
subgrid 降级不能只靠 @supports 块
@supports (grid-template-columns: subgrid) 这类特性检测实际上并不稳定：在 Firefox 111–113 中，它会误返回 true；而在 Chrome 114 及更早版本，以及 Safari 17.4 之前，又可能把整段代码直接忽略，导致降级样式根本无法生效。至于 IE11，情况更彻底——它会完全跳过 @supports，连 fallback 样式都没有执行机会。
真正能发挥作用的，并不是检测语句本身，而是“旧浏览器无法识别新语法，就会自然走默认分支”这一事实。所以：
- 所有降级样式（例如
display: grid加显式列定义）都必须写在@supports代码块外面 @supports块内部只放真正依赖 subgrid 的规则，比如grid-column: subgrid- 用于降级的 CSS 属性必须是 IE 和 Safari 10.1 都能解析的，例如不要使用
gap，改为使用margin
父容器轨道必须静态可复制
subgrid 的核心作用，是复用父容器的列轨道或行轨道；但旧版浏览器并不识别 subgrid，只能手动把父级轨道定义复制一遍。问题在于，如果父容器使用了 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))，那么在降级方案里你无法准确“还原”出真实列数——浏览器不会替你计算，最后只能写死一个固定值。
更安全、更适合 SEO 场景下稳定展示的做法是：
- 父容器使用显式轨道，例如
grid-template-columns: 120px 1fr，或grid-template-columns: [label] max-content [input] 1fr - 通过 CSS 变量统一定义，比如
--form-cols: 120px 1fr，让父级和子级降级样式都共同引用grid-template-columns: var(--form-cols) - 尽量避免使用
display: contents——它会让子元素脱离渲染树，导致父轨道对孙子元素不可见，subgrid 也会直接失效
孙子元素必须手动定位，不能依赖自动分配
当启用 grid-column: subgrid 时，像 label、input 这样的孙子元素通常会自动沿着父轨道对齐；但在降级之后，它们会退化成普通块级元素，grid-column: subgrid 会被浏览器忽略，最终布局往往会塌成单列。
因此，在 CSS subgrid 降级方案中，必须显式控制每一个孙子元素：
- 子元素（也就是父网格的直接项目）先通过
grid-column: 1 / -1占满整行 - 孙子元素（如
、）需要设置display: grid，并明确写出grid-column: 1或grid-column: 2 - 不要写
grid-column: auto，也不要依赖自动分配——旧浏览器通常无法正确理解这种行为
验证是否真启用 subgrid 得靠 JS
@supports 本身并不可靠，最终是否真正启用了 CSS subgrid，应以计算后的样式结果为准。打开 DevTools 的 Layout 面板并勾选 Grid overlay，只能作为视觉辅助；真正上线时，仍然需要用 JS 做精确判断：
getComputedStyle(el).gridTemplateColumns === 'subgrid' 才表示已成功启用；如果返回空字符串或 'none'，就说明没有生效。
这里还要注意几个细节：
- 检测对象必须是设置了
grid-column: subgrid的那个孙子元素，而不是父容器本身 - 在 Firefox 中，还需要确认
about:config里的layout.css.grid-2和layout.css.grid-template-subgrid-value.enabled都为 true，并且浏览器已经重启 - 在 Chrome 和 Safari 中，只要返回值是
'subgrid'就可以认为可信；其他任何值都应直接走降级布局路径
最棘手的地方，并不是单纯维护两套样式，而是在 subgrid 降级时，轨道继承关系几乎没有完全等价的替代方案——每一条 grid-column: subgrid，实际上都对应一组需要手动对齐的 grid-column 值，只要偏差一位，整个布局就可能出现错位。
