@supports 检测需双条件，如(display: grid) and (grid-column: subgrid)，单写display: grid会导致safari等“半支持”浏览器误入subgrid分支；降级样式须写在@supports外层并兼容旧语法；subgrid生效需父容器显式定义列、子元素为直系网格项、孙子元素继承轨道；display: contents会切断结构导致subgrid失效。
@supports 检测必须带双条件，单写 display: grid 不够用
只写 @supports (display: grid) 会让 Safari 10.1、iOS Safari 15.6 这类“半支持”浏览器误入 subgrid 分支——它们能解析 display: grid，但压根不识别 subgrid 值，getComputedStyle 返回空字符串，布局直接错乱。
真正有效的检测是：@supports (display: grid) and (grid-template-rows: subgrid) 或更稳妥的 @supports (display: grid) and (grid-column: subgrid)。后者兼容性更好，因为 grid-column: subgrid 在 Chrome 115+/Firefox 111+/Safari 17.4+ 才生效，且对父容器轨道定义要求更低。
降级样式必须写在 @supports 外层，且语法要 IE/Safari 可解析
旧浏览器（如 IE11、Safari ≤10.1）会完全忽略 @supports 规则本身，所以降级代码如果只塞在里面，它们根本看不到。
必须把 fallback 样式单独写在外面，且只用它们能理解的语法：
- 不能出现
gap、fr、subgrid、grid-area等任何新特性 - 推荐用
display: flex或display: block+float/inline-block回退 - 若需保持列宽一致，手动复制父网格列定义，例如父设
grid-template-columns: 120px 1fr 200px，降级时子元素就用width: 120px/flex: 1/width: 200px显式控制
subgrid 生效有硬性前提，降级时要同步补全这些缺失环节
grid-column: subgrid 不是“加了就灵”，它依赖三个不可省略的前提：
- 父容器必须是
display: grid，且显式声明grid-template-columns（不能靠grid-auto-columns推导） - 子元素自身必须已是父网格的直系网格项（即已通过
grid-column或grid-area被定位） - 真正使用
subgrid的是子元素的子代（即孙子元素），它们才能继承父列轨道
降级时这三点都要手动还原：父容器仍需定义列宽；子元素要用 grid-column: 1 / -1 占满；孙子元素则改用 margin-left / flex-basis / width 对齐对应列位置。
display: contents 会让 subgrid 彻底失效，检查 DOM 层级比写 fallback 更关键
一旦父网格容器内部套了 display: contents 的 wrapper（比如自定义组件里常见），该 wrapper 就不会出现在渲染树中，其子元素就找不到上层 grid-template-columns 的来源，subgrid 直接被跳过——这不是兼容性问题，而是结构断链。
遇到 subgrid 不生效，优先用浏览器开发者工具检查实际参与网格布局的元素层级，确保 subgrid 元素的**直接父元素**就是那个定义了 grid-template-columns 的容器。这点比写一堆降级规则都重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
