Subgrid列宽不对齐的根本原因是父容器未显式定义grid-template-columns轨道。父容器必须用1fr、repeat(3,1fr)等明确值定义列，禁用auto-fit等隐式生成方式，且子元素须为直接子项、复用父级命名线、响应式由父层统一控制。
写了 grid-template-columns: subgrid 却发现列宽还是不对齐？不是语法写错了，而是父容器根本没提供可继承的列轨道——Subgrid 不会“猜”列宽，它只认明确定义的 grid-template-columns 值。
父容器必须显式定义列轨道，不能靠 auto-fit 或 auto-rows
Subgrid 不继承隐式生成的列，比如 repeat(auto-fit, minmax(300px, 1fr))) 看似合理，但浏览器解析后 grid-template-columns 计算值为 none，子元素的 subgrid 就直接被丢弃。
- ✅ 有效写法：
grid-template-columns: 1fr 2fr 1fr、grid-template-columns: [start] 200px [main] 1fr [end]、grid-template-columns: repeat(3, 1fr) - ❌ 无效写法：
grid-auto-columns: 1fr、gap: 1rem单独存在、grid-template-columns: repeat(auto-fit, ...) - 验证方式：Chrome DevTools → Layout 面板 → 勾选 “Show line names”，看到实线列名才表示轨道已就绪
子元素必须是父网格的直接子项，且声明 grid-column 范围
中间插一层 div、fieldset，甚至用 display: contents 包裹，都会让子元素失去“直接子项”身份，Subgrid 继承链当场中断。
- ✅ 正确结构：
<div class="grid-parent"><div class="subgrid-child"></div></div>，且.subgrid-child设grid-column: 1 / -1或明确跨列（如grid-column: 2 / 4） - ❌ 错误结构：
<div class="grid-parent"><div class="wrapper"><div class="subgrid-child"></div></div></div>—— 无论.wrapper是否设display: contents，都失效 - 漏掉
grid-column声明会导致子网格默认只占单列，内部元素用grid-column: 2会锚定到错误位置，而非父级第 2 列
命名线必须复用父级定义，不能重声明同名轨道
父容器用了 grid-template-columns: [label] 150px [input] 1fr [hint] 200px，子元素想对齐，就得直接消费这些名字；自己再写 [label] 会触发整条声明被忽略。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确用法：
.subgrid-child > label { grid-column: label; }、.subgrid-child > input { grid-column: input; } - ❌ 静默失败：
.subgrid-child { grid-template-columns: [label] subgrid; }—— 浏览器直接丢弃该声明 - 子元素若需局部调整列行为（如某字段合并两列），只能在自身子项上用
grid-column: span 2，不能动父级命名线
响应式切换必须由父容器驱动，子层禁用 media query
Subgrid 本身不响应，它只是父网格轨道的镜像。一旦子元素自己写 @media 改 grid-template-columns，就等于主动退出继承模式。
- ✅ 正确做法：所有断点逻辑集中在父容器，例如
@media (max-width: 768px) { .grid-parent { grid-template-columns: 1fr; } }，子层保持grid-template-columns: subgrid不变 - ❌ 错误做法：
.subgrid-child { @media (max-width: 768px) { grid-template-columns: 1fr 1fr; } }—— computed 样式中该属性变为none - 移动端常需隐藏某些字段（如
.hint），用display: none，避免留空行破坏父级行轨道稳定性
真正卡住的往往不是那一行 subgrid 声明，而是父容器轨道是否“干净”、DOM 是否多了一层看不见的包装、开发者工具里 computed 值是不是真的显示为 subgrid 而非 none——哪怕一个空格或换行符，在 display: contents 场景下也可能成为断链点。
