怎样解决CSS subgrid在不支持浏览器中的降级

subgrid降级不能只靠@supports块，因其在Firefox 111–113误报true、Chrome 114及更早和Safari 17.4之前直接忽略整块、IE11完全跳过；降级样式必须写在@supports外层，使用兼容语法（如margin替代gap），父轨道须显式静态定义并用CSS变量统一，孙子元素需手动定位，最终启用状态须通过JS检测getComputedStyle(el).gridTemplateColumns是否等于'subgrid'确认。

subgrid 降级不能只靠 @supports 块

因为 @supports (grid-template-columns: subgrid) 在 Firefox 111–113 里会误报 true，在 Chrome 114 及更早、Safari 17.4 之前则直接忽略整个块——降级样式根本不会加载。IE11 更是完全跳过 @supports，连 fallback 都没机会执行。

真正起作用的不是检测，而是「老浏览器看不懂新语法，自然走默认分支」这个事实。所以：

1. 所有降级样式（比如 display: grid + 显式列定义）必须写在 @supports 块外面
2. @supports 块里只放真正依赖 subgrid 的规则，比如 grid-column: subgrid
3. 降级用的 CSS 属性必须是 IE/Safari 10.1 都能解析的，比如不用 gap，改用 margin

父容器轨道必须静态可复制

subgrid 要复用父容器的列/行轨道，但旧浏览器不认 subgrid，只能手动抄一遍。问题在于：如果父容器用 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))，你没法在降级时“还原”出实际列数——浏览器不计算，你就得硬编码一个固定值。

安全做法：

1. 父容器用显式轨道，比如 grid-template-columns: 120px 1fr 或 grid-template-columns: [label] max-content [input] 1fr
2. 用 CSS 变量统一定义，如 --form-cols: 120px 1fr，父、子降级都引用 grid-template-columns: var(--form-cols)
3. 避免 display: contents ——它会让子元素脱离渲染树，父轨道对孙子元素不可见，subgrid 直接失效

孙子元素必须手动定位，不能依赖自动分配

启用 grid-column: subgrid 时，label/input 这类孙子元素会自动按父轨道对齐；但降级后它们退化为普通块级元素，grid-column: subgrid 被跳过，布局就塌成一列。

所以降级时必须显式控制每个孙子：

1. 子元素（即父网格的直系项）先用 grid-column: 1 / -1 占满整行
2. 孙子元素（如 <label>、<input>）要设 display: grid，并显式写 grid-column: 1 或 grid-column: 2
3. 不能写 grid-column: auto 或指望自动分配——旧浏览器不理解

验证是否真启用 subgrid 得靠 JS

@supports 不可靠，最终判断依据是计算样式。打开 DevTools Layout 面板勾选 Grid overlay 只能辅助肉眼观察，真正落地时得用 JS 确认：

getComputedStyle(el).gridTemplateColumns === 'subgrid' 才算启用；返回空字符串或 'none' 就说明失败。

注意点：

1. 检查对象必须是设置了 grid-column: subgrid 的那个孙子元素，不是父容器
2. Firefox 还需确认 about:config 中 layout.css.grid-2 和 layout.css.grid-template-subgrid-value.enabled 都为 true，且重启过浏览器
3. Chrome/Safari 下只要返回 'subgrid' 就可信，其他值一律走降级路径

最麻烦的不是写两套样式，而是 subgrid 的轨道继承关系在降级时没有等价替代——每一条 grid-column: subgrid 都对应一组手动对齐的 grid-column 值，差一位就会错位。