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 都没机会执行。
真正起作用的不是检测，而是「老浏览器看不懂新语法，自然走默认分支」这个事实。所以：
- 所有降级样式（比如
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)))，你没法在降级时“还原”出实际列数——浏览器不计算，你就得硬编码一个固定值。
安全做法：
- 父容器用显式轨道，比如
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 被跳过，布局就塌成一列。
所以降级时必须显式控制每个孙子：
- 子元素（即父网格的直系项）先用
grid-column: 1 / -1占满整行 - 孙子元素（如
<label></label>、<input>）要设display: grid，并显式写grid-column: 1或grid-column: 2 - 不能写
grid-column: auto或指望自动分配——旧浏览器不理解
验证是否真启用 subgrid 得靠 JS
@supports 不可靠，最终判断依据是计算样式。打开 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 值，差一位就会错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
