subgrid 在主流浏览器中存在明确版本断层：chrome 115+、firefox 111+、safari 17.4+ 才真正支持；旧版均不识别 subgrid 值，css 引擎直接跳过声明，getcomputedstyle 返回空字符串或初始值。
Subgrid 在主流浏览器中不是“基本可用”，而是存在明确的版本断层：Chrome 115+、Firefox 111+、Safari 17.4+ 才真正支持；更早版本（包括所有 iOS Safari 16 及之前、全部旧版 Edge、绝大多数 Android WebView）压根不识别 subgrid 值，CSS 引擎直接跳过整条声明，getComputedStyle 返回空字符串或初始值，不是“没效果”，是“没解析”。
@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 被禁用。仅靠该检测无法保证实际生效。
- 真实验证必须结合 JS：
getComputedStyle(el).gridTemplateRows === 'subgrid' - Firefox 需手动开启两个
about:config开关，并完全重启浏览器 - DevTools 的「Computed」面板对无效
subgrid不做标记，容易误判——建议叠加outline+ 「Grid overlay」可视化确认
subgrid 必须作用于直系子元素且父容器轨道显式定义
subgrid 不是泛用修饰符，它只在严格条件下触发：父容器必须是 display: grid，且明确定义了 grid-template-rows 或 grid-template-columns（不能依赖 auto-fit 或 grid-auto-rows 推导）；子元素必须是父网格的**直系网格项**（即已被 grid-column/grid-row 定位），否则继承链断裂。
- 常见失效场景：
display: contents包裹层导致子元素脱离网格上下文 - 错误写法：
.child { grid-template-rows: subgrid; }但父容器没设grid-template-rows - 更稳妥写法：
grid-column: subgrid（而非grid-template-columns: subgrid），兼容性略高
降级方案不能只靠 @supports 块包裹
@supports 块在 IE11、Firefox ≤110 等旧引擎中会被整个跳过，若把降级样式全塞在里面，会导致无 fallback 可用。正确结构是：基础 Grid 布局放 @supports 内，而兼容性回退样式必须写在块外、且使用旧引擎可识别的语法。
- 父容器统一写：
grid-template-rows: 40px 1fr 60px（固定轨道，避免动态值） - 不支持时子元素写：
grid-row: 1 / 4（手动覆盖三行），而非依赖span或隐式线 - 若需列对齐，子元素自身要设
display: grid并重复父列定义，其子代再显式写grid-column: 1、grid-column: 2 - 动态列（如
repeat(auto-fit, ...)）fallback 时必须转为固定列数（如repeat(3, 1fr)）
最易被忽略的是：subgrid 生效的前提不是“写了就行”，而是父网格轨道必须在渲染树中真实存在且可被继承——DOM 层级偏移、display: contents、CSS 变量未展开、或父容器被 transform/clip 影响布局上下文，都可能导致继承失败，且没有任何报错提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
