subgrid 在非主流浏览器（如旧版 edge、ios safari 16 及更早、firefox ≤110）中完全不被识别，css 引擎直接跳过 grid-template-columns: subgrid 等声明，getcomputedstyle 返回空字符串或初始值，需用 @supports 检测并配合显式网格定义 fallback。
subgrid 在非主流浏览器（如旧版 Edge、iOS Safari 16 及更早、Firefox getComputedStyle(el).gridTemplateRows 返回空字符串或 "none"。你无法靠补前缀、改写法或 Autoprefixer 拯救它，必须用明确的降级路径。
@supports (grid-template-rows: subgrid) 不可靠，别全信它
Firefox 111–113 存在已知 bug：@supports (grid-template-rows: subgrid) 会错误返回 true，即使 layout.css.grid-2 和 layout.css.grid-template-subgrid-value.enabled 两个开关都关着。Safari 和旧 Chrome 则压根不识别该检测项，整个 @supports 块会被忽略。
- 真正有效的检测方式是 JS 动态读取：
getComputedStyle(el).gridTemplateRows === "subgrid" - 若返回空字符串或
"none"，说明subgrid未激活，必须走 fallback -
@supports块只适合包裹基础 Grid 布局（如display: grid），subgrid相关样式应独立处理，或配合 JS 注入 - 不要把降级规则全塞进
@supports块里——IE 和旧 Safari 会跳过整块，导致无样式可用
父容器轨道必须静态，否则 fallback 无法对齐
subgrid 要求父容器显式定义 grid-template-rows 或 grid-template-columns，且不能是 auto-fit、minmax() 这类动态生成的轨道。因为 fallback 需要手动复现轨道结构，而动态值无法推导出固定行/列数。
- ✅ 正确：父设
grid-template-rows: 40px 1fr 60px→ 子 fallback 写grid-row: 1 / 4 - ❌ 错误：父用
grid-template-rows: repeat(auto-fit, minmax(200px, 1fr)))→ fallback 无法确定 span 几行 - 推荐用 CSS 变量统一轨道定义：
--grid-rows: 40px 1fr 60px，父、子 fallback 都引用grid-template-rows: var(--grid-rows) - 子元素自身需设为
display: grid才能承载 fallback 的轨道定义，不能只靠grid-row占位
别碰 display: contents，它会让 subgrid 彻底失效
组件封装中常有人给 wrapper 加 display: contents 来“透传”子元素进网格，但这会让子元素脱离渲染树，导致其无法找到上层 grid-template-rows 的来源。subgrid 失效后，JS 检测也返回空值，fallback 也无法触发——因为布局链已经断了。
- 只要子元素的父级（或任意上级）用了
display: contents，subgrid就必然不生效 - 这种失效不可逆，
@supports和 JS 检测都无能为力 - 替代方案：去掉
display: contents，改用grid-area显式定位，或用visibility: hidden+height: 0模拟“隐藏但占位” - 检查方法：打开 DevTools Layout 面板 → 勾选 Grid overlay，若子元素 outline 不贴合父网格线，大概率是
display: contents干的
subgrid 的语义（继承轨道对齐）在降级时没有等价替代；你只能手动对齐、硬编码行数、放弃动态响应——这些妥协点，往往在开发后期才暴露。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
