Subgrid 是显式委托父网格轨道控制权而非继承，要求父容器为显式定义轨道的网格容器且子元素必须是其网格项；仅支持 grid-column/grid-row，用于对齐多层表单列宽等场景。
Subgrid 不是“继承父级轨道”的快捷键，而是显式委托轨道控制权
很多人以为 subgrid 是让子网格自动“抄”父网格的列/行定义，其实不是。它只是把父网格容器中已声明的 grid-template-columns 或 grid-template-rows 的**轨道引用权**交给子元素——前提是父容器本身必须是网格容器且明确定义了轨道。
常见错误现象：display: grid; grid-template-columns: repeat(4, 1fr); 的父容器下，子元素设 display: grid; grid-column: subgrid; 却没效果——因为子元素没被放进父网格的某个网格项里（即没用 grid-area 或 grid-column/grid-row 显式定位）。
- 必须先让子元素成为父网格的一个**网格项**（例如通过
grid-column: 1 / -1或grid-area） - 父容器的
grid-template-columns必须是**显式定义**的（不能是grid-auto-columns或仅靠grid-template-areas推导） -
subgrid只能用于grid-column或grid-row，不能用于grid-template-columns本身（即子元素不能自己再写grid-template-columns: subgrid）
用 grid-column: subgrid 对齐多层表单字段的列宽
这是 Subgrid 最实用的场景：表单里一组 label + input 嵌套在多个卡片内，又需要所有 label 宽度一致、所有 input 对齐——不用 JS 计算，也不用全局 CSS 变量硬编码。
关键点在于把表单区域设为网格容器，用 grid-template-columns 定义两列（label + input），然后每个卡片内部用 grid-column: subgrid 复用同一套列轨道：
form {
display: grid;
grid-template-columns: 120px 1fr; /* 显式定义 */
}
.card {
display: grid;
grid-column: 1 / -1; /* 先占满整行 */
}
.card > * {
grid-column: subgrid; /* 复用 form 的两列轨道 */
}
注意：如果 .card 没有 grid-column: 1 / -1 这类定位，它就不是 form 的网格项，subgrid 直接失效。
Firefox 和 Chrome 都支持了，但 Safari 16.4+ 才开始支持 subgrid
目前（2024 年中）subgrid 在 Chromium 111+ 和 Firefox 71+ 已稳定支持，Safari 直到 16.4 才加入。不支持时，grid-column: subgrid 会被忽略，子元素退化为普通块级元素——这通常导致布局塌陷，而不是静默降级。
- 不能只靠
@supports (grid-column: subgrid)包裹整个规则——要确保 fallback 布局可用（比如加一层display: grid+ 手动重复列定义） - 避免在
subgrid上叠加grid-gap：父网格的gap不会穿透到子网格；子网格自己的gap会生效，但轨道对齐仍以父为准 -
subgrid不支持grid-template-areas继承——area 名称不会跨层级传递
嵌套太深时，Subgrid 不会“链式继承”，只认直接父网格
如果 A 是网格容器，B 是 A 的网格项并设了 grid-column: subgrid，那么 C 是 B 的子元素、即使也设 grid-column: subgrid，它也不会去继承 A 的轨道——因为 B 本身不是网格容器（除非你额外给 B 加 display: grid），更不是 A 的“轨道提供者”。
换句话说：subgrid 只向上查一级，且要求那一级既是网格容器，又是当前元素的**直接父元素**，同时该父元素必须是**父网格容器的网格项**（即被父网格托管着）。
容易被忽略的是：当你在组件库中封装一个带 subgrid 的子组件时，必须确保它的父元素不仅用了 display: grid，还明确把它放入了某一行/列轨道中——否则这个子组件在不同上下文里可能一半时间有效、一半时间失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
