唯一可行检测方式是@supports (grid-template-rows: subgrid)，因subgrid是独立语法特性，其他写法均失效；降级需手动复写grid-row轨道范围并避免display: contents破坏上下文。
直接用 @supports (grid-template-rows: subgrid) 检测，但必须配合手动轨道对齐降级——因为不支持的浏览器连该声明都解析不了，不会进任何分支，更不会“自动 fallback”。
为什么 @supports (grid-template-rows: subgrid) 是唯一可行检测方式
Subgrid 不是属性值组合，而是独立语法特性，只有这个完整声明能被现代浏览器准确识别。其他写法全失效：
-
@supports (display: grid)✅ 会通过，但无法区分是否支持 subgrid（Safari 16.4 支持 grid 却不支持 subgrid） -
@supports (subgrid: rows)❌ 语法错误，浏览器直接丢弃整条@supports规则 -
@supports selector(:has())❌ 和 subgrid 无关，且 Safari ≤15.3 根本不认这个语法
Chrome 115+、Firefox 111+、Safari 17.4+ 才返回 true；其余所有版本（含 iOS Safari 16 及更早）静默跳过整块规则，等同于没写。
降级必须显式复写 grid-row 轨道范围，不能依赖 auto
不支持 subgrid 的浏览器会把 grid-template-rows: subgrid 当作无效声明，子元素失去行轨道上下文，grid-row: span 3 这类相对定位直接失效，结果是内容堆叠或错位。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须定义明确轨道：
grid-template-rows: 40px 1fr 60px（不能是auto-fit或minmax()动态生成） - 子元素降级时要硬编码覆盖范围：
grid-row: 1 / 4，对应父容器三行轨道 - 若父容器轨道数动态变化（如 JS 插入新行），降级方案必须同步更新
grid-row值，CSS 本身做不到
别让 display: contents 破坏 subgrid 上下文
只要 subgrid 元素的**直接父元素**用了 display: contents，subgrid 就必然失效——因为该父元素已从渲染树中移除，子元素根本找不到上层 grid 定义。
- 典型场景：自定义组件封装时，
<div class="card"><div style="display: contents">...</div></div> - 检查方式：用 DevTools 查看 computed styles，若
gridTemplateRows返回空字符串，大概率是此问题 - 修复方案：删掉
display: contents，或把 subgrid 移到其直系父容器上
IE11 和旧 Safari 需要完全独立的 -ms-grid 回退路径
@supports 在 IE 全系和 Safari ≤9 中被彻底忽略，所以降级样式必须放在 @supports 外部，且语法必须兼容：
- 不能用
gap，改用margin；不能用align-content，IE11 不支持 - IE11 的
-ms-grid是独立语法：-ms-grid-rows替代grid-template-rows，且必须写死数值（1fr不被识别） -
display: -ms-grid必须写在display: grid前面，否则 IE11 会跳过私有声明
最易被忽略的一点：subgrid 降级不是“加个兜底”，而是重写布局逻辑。父容器轨道一旦变化，降级的 grid-row 值必须同步改，否则旧浏览器里子项就脱离控制。这没法靠 CSS 自动推导，得靠开发者心里有数。
