subgrid不是自动继承机制，而是需父容器显式定义grid-template-columns/rows、子元素为直接子项且声明grid-template-columns: subgrid才生效；漏任一条件即退化为none。
Subgrid 不是“继承槽位”的开关，而是显式委托轨道控制权的机制——写 display: grid 不够，漏掉 grid-template-columns: subgrid 或父容器没定义显式轨道，它就完全不工作。
为什么 grid-template-columns: subgrid 没效果？
最常见原因是父容器根本没提供可被继承的列轨道。Subgrid 只认 grid-template-columns 或 grid-template-rows 的显式声明，其他方式生成的“列”它一律无视。
-
grid-auto-columns: 1fr、gap、grid-auto-flow都不产生可继承轨道 -
repeat(auto-fit, minmax(300px, 1fr)))是动态计算，浏览器无法确定列数，subgrid直接退化为none - 父容器必须同时满足：
display: grid+grid-template-columns: 1fr 2fr 1fr（或带命名线）
子元素不是父网格的直接网格项
DOM 层级错一层，Subgrid 就彻底失效。它只对父容器的**真实直接子节点**生效，中间插任何 wrapper 都会断链。
- ❌
<div class="parent"><div style="display: contents"><div class="child"></div></div></div>——.child已不是直接子项 - ❌ 包在
flex容器、position: absolute父级或display: inline元素里也不行 - ✅ 必须让
.child直接挂载在.parent下，并用grid-column: 1 / -1或grid-area显式定位
grid-template-columns: subgrid 和像素值混写会静默失效
浏览器对语法极其严格：同一声明中不能既写 subgrid 又写具体尺寸。整条规则会被忽略，且不报错。
- ❌
grid-template-columns: subgrid 200px—— 整条声明无效，computed 值为none - ✅ 若只需继承列、自定义行，写
grid-template-columns: subgrid+grid-template-rows: 1fr auto - ✅ 若行列都要继承，必须分开写：
grid-template-columns: subgrid和grid-template-rows: subgrid
如何确认 Subgrid 真正生效？
视觉“看起来对齐”不等于 Subgrid 在工作——它退化成普通 Grid 后可能凑巧排得还行，但轨道已错位。
- 打开 Chrome/Firefox DevTools 的 Grid 面板，勾选 “Show line names”，确认显示的列线名称来自父容器（如
label、input），而不是子容器自己定义的 - 检查 computed 样式：
grid-template-columns的值必须明确解析为subgrid，不是空字符串或none - 用
@supports (grid-template-columns: subgrid)检测时注意：Safari 16.4+ 才真正可用，16.3 及更早返回false但行为异常
真正容易被忽略的是：Subgrid 不解决“子容器自身在父网格中的位置问题”，它只管“子容器内部的元素怎么对齐到父轨道线”。如果子容器本身没占满对应区域（比如没写 grid-column: 1 / -1），或者父轨道高度为 auto 导致 align-self 失效，再正确的 subgrid 声明也看不出效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
