subgrid 不支持浏览器会忽略含 subgrid 的声明，导致布局错乱；必须用 @supports 检测（仅 chrome 115+/firefox 111+/safari 17.4+ 有效）、getcomputedstyle 运行时验证，并穿透两层显式定义列结构兜底。
不支持 subgrid 的浏览器（如 Chrome 114 及更早、Safari 17.3 及更早、所有 iOS Safari 16 及之前版本）会直接跳过含 subgrid 的声明，不报错、不降级、不 fallback——子元素退化为普通块级元素，布局当场错乱。必须用运行时检测 + 穿透两层的显式定义来兜底。
如何用 @supports 准确检测 subgrid 支持
@supports (grid-template-columns: subgrid) 在 Chrome 114 及更早、Safari 17.3 及更早中根本无法识别该语法，整块规则会被忽略。这不是检测不准，而是这些浏览器压根没实现该语法解析器。实际可用的检测方式只有：
- 只在 Chrome 115+、Firefox 111+、Safari 17.4+ 中生效；其他版本一律走降级路径
- 不要混写
@supports内外同一选择器的grid-template-columns声明——比如不能在外层写.child { grid-template-columns: 1fr 2fr; }，又在@supports里覆盖成subgrid，旧浏览器会按外层执行，但新浏览器可能因 specificity 或顺序问题误用外层值 - 真正可靠的 fallback 必须独立成块，且所有样式都基于同一套列定义变量，例如：
--cols: 120px 1fr;
为什么 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: var(--cols)（建议用 CSS 变量统一） - 子容器（即本该设
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)），否则无法对齐
别让 display: contents 彻底破坏 subgrid 链路
在组件封装中，常有人给 wrapper 加 display: contents 想让它不占渲染空间，但此举会让 wrapper 的子元素脱离原始网格上下文——它们的父节点不再是定义了 grid-template-columns 的容器，subgrid 直接失效。
- 检查 DOM 结构层级，确保
subgrid元素的**直接父元素**就是定义了grid-template-columns或grid-template-rows的容器 -
display: contents不应在subgrid链路上的任何位置使用，包括父容器的父容器 - 哪怕只在某一层加了
display: contents，整个子网格继承关系就断了，@supports和 JS 检测都救不了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
