subgrid不会自动继承父级轨道，必须显式声明grid-template-columns: subgrid或grid-template-rows: subgrid；仅对直接子元素生效，父容器需明确定义轨道且保持纯净（无gap、无auto-fit干扰），嵌套三层时孙子对齐中间层而非顶层。
Subgrid 本身不自动响应，也不跨组件穿透；要保持对齐，必须每一层都显式声明 subgrid，且父级轨道必须明确、无干扰。
为什么子网格没对齐父网格的列线？
最常见原因是只写了 display: grid，却漏掉关键声明：grid-template-columns: subgrid 或 grid-template-rows: subgrid。Subgrid 不是 display 值，也不是默认行为——它必须单独在对应维度上启用。
- 父容器未定义
grid-template-columns（比如只用grid-auto-columns），子元素设subgrid就无效 - 父用了
gap，而子又没写grid-column: span N覆盖完整跨度，会导致隐式轨道插入，破坏对齐基线 - 子元素用了
display: subgrid（已废弃语法），现代标准只认display: grid+grid-template-*为subgrid
如何让三层嵌套仍对齐顶层网格？
Subgrid 只作用于直接子元素，孙子层对齐的是中间层的轨道，不是顶层。想“穿透”对齐，中间层必须也是 subgrid，且不能引入任何额外轨道。
- 中间层禁止使用
gap、grid-row-gap、grid-column-gap—— 它们会生成隐式轨道，切断轨道映射链 - 中间层必须显式声明
grid-template-columns: subgrid和/或grid-template-rows: subgrid，不能只写一边 - 顶层父容器的轨道定义需固定（如
1fr 2fr 1fr），避免依赖auto-fit或minmax()动态计算，否则中间层无法稳定继承
响应式下 subgrid 怎么换列数？
Subgrid 本身不响应，响应逻辑必须由父网格驱动。子网格只是“镜像”，不能独立 media query 切换轨道。
- 在父容器上用媒体查询改
grid-template-columns，子层的subgrid会自动跟随变化 - 不要在子层写
@media改自己的grid-template-columns—— 那就脱离了 subgrid，变成独立网格 - 若需不同断点下不同对齐粒度（如 PC 端对齐 4 列，移动端对齐 2 列），应拆成两个独立父网格容器，而非强求单个 subgrid 自适应
浏览器兼容性与降级怎么处理？
Chrome 114+、Firefox 110+、Safari 16.4+ 已原生支持，但 IE 和旧 Edge 完全不支持，部分安卓 WebView 仍需开启 flag。
- 用
@supports (display: grid) and (grid-template-columns: subgrid)包裹 subgrid 样式，确保只在支持环境生效 - 降级方案不是“模拟 subgrid”，而是回退到传统嵌套：父设
grid，子设display: grid+ 手动复写相同grid-template-columns - 避免用 JS 检测 subgrid 支持并动态插入样式——渲染时序不可控，易造成布局抖动
真正难的不是写对那两行 subgrid，而是守住父轨道的“纯净性”：不加 gap、不混 auto-fit、不跨层假设继承。一旦中间某层悄悄加了 gap: 1rem，整个对齐链就断了，而且错误不报错、只偏移——这种问题最耗调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
