subgrid生效需同时满足四个条件：父容器显式定义grid-template-columns/rows、子元素为直接子项且display: grid、子元素显式声明grid-template-columns: subgrid或grid-template-rows: subgrid，并通过grid-column/grid-row指定在父网格中的位置。
subgrid 不是“写了就能用”的功能，它必须同时满足四个硬性条件才生效：父容器显式定义轨道、子元素是直接子项、子元素自身为 display: grid、且显式声明 grid-template-columns: subgrid 或 grid-template-rows: subgrid。缺一不可。
父容器没写 grid-template-columns 或 grid-template-rows，subgrid 就是无效的
很多人写了 grid-template-columns: subgrid 却没效果，根源在父容器只用了 grid-auto-columns、repeat(auto-fit, ...) 或仅靠 gap，这些生成的是隐式轨道，subgrid 不继承。
- ✅ 正确写法：
.parent { display: grid; grid-template-columns: 1fr 2fr 1fr; }—— 显式列数固定，子元素才能继承 - ❌ 错误写法：
.parent { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))); }—— 浏览器无法确定列数，subgrid退化为none - ⚠️ 注意：
grid-auto-rows: 100px≠grid-template-rows，它不提供可继承的轨道线，子元素设grid-template-rows: subgrid仍会失效
子元素不是父网格的直接子项，subgrid 完全不触发
subgrid 只对父网格的**真实 DOM 直接子元素**生效。中间插一层 div、display: contents 或 flex 容器，子网格就断联了。
- ❌ 无效结构：
<div class="parent-grid"><div style="display: contents"><div class="child-grid"></div></div></div>——.child-grid已不是直接子项 - ✅ 正确做法：删掉中间 wrapper，让
.child-grid直接挂到.parent-grid下，并用grid-column: 1 / -1或grid-row: 2 / 4显式声明占位范围 - ⚠️ 常见误判：以为加了
grid-column就等于“接入网格”，其实那只是定位指令，不改变 DOM 层级关系
grid-template-columns: subgrid 和像素值混写，整条规则被浏览器忽略
你不能在同一个 grid-template-columns 或 grid-template-rows 声明里，既写 subgrid 又写 1fr、200px 等具体尺寸值。CSS 解析器会直接丢弃整条规则。
- ❌ 错误写法：
grid-template-columns: subgrid 1fr或grid-template-rows: subgrid 50px - ✅ 正确写法：要么全
subgrid（如grid-template-columns: subgrid），要么完全自定义（如grid-template-columns: 1fr 2fr 1fr） - ? 折中方案：只继承一个方向，比如
grid-template-columns: subgrid，再单独写grid-template-rows: auto 1fr auto控制行
浏览器支持和降级必须手动处理，不能依赖 @supports 兜底
Chrome 117+、Edge 117+、Safari 16.4+ 支持 subgrid，Firefox 仍需手动开启实验标志；更麻烦的是，旧版 Safari（16.3 及更早）完全不识别该关键字，而某些安卓 WebView 声称支持却行为异常。
- ⚠️
@supports (grid-template-columns: subgrid)在 Safari 16.3 返回false，但 16.4 才真正可用 —— 这个检测本身就有滞后性 - ⚠️ 不支持时，
grid-column: subgrid会被忽略，子元素退化为普通块级元素，常导致布局塌陷，而非静默降级 - ✅ 实用降级：父容器先定义好
grid-template-columns，子元素先写 fallback 的grid-column: span 3或重复列定义，再用@supports包裹subgrid覆盖
最易被忽略的一点：即使所有条件都满足，如果子元素没通过 grid-column 或 grid-row 显式声明自己在父网格中的位置（比如 grid-column: 1 / -1），它就不是父网格的网格项，subgrid 依然不会启动 —— 这个“接入动作”是强制的，不是可选的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
