subgrid 必须显式启用，仅设 display: grid 不生效；需同时声明 grid-template-columns: subgrid 和 grid-template-rows: subgrid，且父容器轨道须为显式定义（如 1fr 2fr），不可用 repeat(auto-fit) 或隐式轨道，否则继承失败。
Subgrid 不是“让子网格自动对齐”的开关，它只在你明确告诉浏览器“我要复用父级轨道”时才生效；漏掉 grid-template-columns: subgrid 或 grid-template-rows: subgrid 中的任意一个，就等于没开。
为什么写了 display: grid 却没对齐？
最常见错误：只设了 display: grid，却没声明哪一维要继承轨道。Subgrid 不是 display 的值，也不是默认行为——它必须显式启用。
-
grid-template-columns: subgrid和grid-template-rows: subgrid是独立开关，只写一边，另一边就是普通独立网格 - 父容器若只用
grid-auto-columns或repeat(auto-fit, ...)，没有显式grid-template-columns，子元素的subgrid会直接退化为none - 写了已废弃的
display: subgrid（旧草案语法），现代浏览器完全忽略
父容器轨道必须“干净”，否则 subgrid 会断链
Subgrid 的轨道继承不是松散绑定，而是强依赖父级轨道定义的稳定性。任何隐式轨道插入都会切断映射链。
- 父容器用了
gap，而子元素没用grid-column: 1 / -1覆盖整行，就会在子网格内部插入隐式轨道，破坏列线对齐 - 中间层容器如果加了
grid-auto-rows、空<div></div>或display: contents包裹，孙辈元素就无法穿透对齐顶层 - 不能混写：
grid-template-rows: subgrid 50px是非法的，整条声明会被浏览器丢弃
三层嵌套怎么让图标和文字对齐顶层列线？
Subgrid 只作用于直接子元素。想让孙子层对齐顶层，中间层必须也是 subgrid 容器，且不能引入任何新轨道。
- 中间层（如
.card-body）必须同时声明grid-template-columns: subgrid和grid-template-rows: subgrid - 中间层禁止使用
gap，或需手动用gap: inherit并确保父gap不触发隐式行/列 - 中间层的
grid-column必须覆盖完整跨度（如grid-column: 1 / -1），否则列索引偏移，命名线（如[icon]）锚定失效
响应式下 subgrid 怎么换列数？
Subgrid 本身不响应，它只是父网格轨道的镜像。响应逻辑必须全部放在父容器上，子层不能有自己的 media query。
- ✅ 正确：在父容器上用
@media (min-width: 768px) { grid-template-columns: 1fr 2fr 1fr; }，子层subgrid自动跟随 - ❌ 错误：在子元素里写
@media (min-width: 768px) { grid-template-columns: 1fr 1fr; }，这会让它脱离 subgrid，变成独立网格 - 若需 PC 端对齐 4 列、移动端对齐 2 列，应拆成两个独立父容器，而不是强求单个 subgrid “自适应”
最容易被忽略的一点：Subgrid 对齐成败，不取决于你写了多少行 CSS，而取决于父容器是否真的定义了可继承的轨道——repeat(auto-fit, ...) 看似简洁，但它是 subgrid 的天敌；真正能继承的，只有 grid-template-columns: 1fr 2fr 1fr 这类显式、固定、无动态计算的声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
