Subgrid 未对齐的根本原因是父容器未显式定义 grid-template-columns，子元素非直接网格项，或被 gap、display: contents 等打断继承链；它只继承明确定义的轨道，不认 auto-fit 或 grid-auto-columns 生成的隐式轨道。
移动端嵌套列表用 subgrid 能真正对齐，前提是父网格轨道显式、子元素是直接网格项、且不被 gap 或 display: contents 暗中打断继承链。
为什么写了 grid-template-columns: subgrid 却没对齐？
这不是语法写错了，而是父容器根本没提供可继承的列轨道。Subgrid 不继承隐式轨道，只认明确定义的 grid-template-columns 值。
- 父容器用了
grid-auto-columns: 1fr或repeat(auto-fit, minmax(300px, 1fr)))—— 这些生成的是隐式轨道，subgrid视而不见 - 父容器写了
gap: 1rem，但子元素没声明grid-column: 1 / -1覆盖全部列 —— 浏览器会悄悄插入隐式轨道，切断映射 - 子元素外层套了
fieldset或div并设了display: contents—— DOM 层级断了，.child-grid已不是父网格的直接子项
grid-column: span N 为什么不能省？
子元素必须明确告诉父网格：“我要占满所有列”，否则它只是个普通网格项，不会触发 subgrid 的轨道绑定逻辑。
- 父容器是
grid-template-columns: 1fr 2fr 1fr（共 3 列），子元素就得写grid-column: span 3或grid-column: 1 / -1 - 写成
grid-column: 1 / 2或漏掉该声明，子元素会被当成单列项处理，grid-template-columns: subgrid直接退化为none - 响应式切换列数时，这个
span值也得同步改 —— 例如小屏下父容器变成1fr，子元素就要对应改成span 1
移动端表单字段对齐为何比 flex 更稳？
因为 subgrid 锚定的是父级显式定义的行轨道坐标，不是内容基线。字体缩放、padding 差异、甚至某字段缺 .hint，都不会导致错位。
立即学习“前端免费学习笔记（深入）”；
- 父容器定义
grid-template-rows: [label] auto [input] 1fr [hint] auto，每行轨道固定存在 - 子元素里
label写grid-row: label，input写grid-row: input，位置由轨道名锁定，与内容无关 - 若用
flex+align-items: baseline，只要系统字体放大或某input多了padding-top，基线立刻漂移
如何确认 subgrid 真生效了？
别信眼睛，要查 DevTools 计算样式和线名来源。很多“看起来对齐”的情况，其实是子网格退化为普通 grid 后靠巧合撑出来的。
- 在 Chrome/Firefox Grid 面板勾选 “Show line names”，看到的列/行线名必须来自父容器（颜色标记为 parent），而不是子元素自定义的
- 检查
computed样式中grid-template-columns的值，必须明确显示为subgrid，不是none或空字符串 - 用
@supports (grid-template-columns: subgrid)检测时注意：Safari 16.3 及更早返回false，但实际 16.4 才真正可用；部分安卓 WebView 声称支持却行为异常
真正难的从来不是那一行 subgrid 声明，而是确保从父容器到子元素之间没有空文本节点、没有 display: contents、没有未声明的 gap、也没有媒体查询中途覆盖轨道定义 —— 这条继承链极其脆弱，一个疏忽就全盘失效。
