先记住这个答案
普通嵌套 Grid 会在子元素内部重新创建轨道，各张卡的标题行由各自内容撑高，所以按钮容易错位。subgrid 让子网格在指定轴使用父 Grid 的对应轨道，兄弟卡片内的元素因此可以对齐。它仍受限制：只继承所设的轴，只能使用自己跨到的父轨道，不能把子项放到范围外的父级网格线。
- 普通嵌套 Grid 独立计算轨道
subgrid使用父级对应轨道- 只继承指定的行轴或列轴
- 不能超出父级所占网格范围定位
为什么独立网格会错位
三张卡片各自写 grid-template-rows: auto 1fr auto 时，每张卡的 auto 都按自身标题高度算。第一张标题一行，第二张两行，正文和按钮的起点便可能不同。看起来轨道定义相同，实际轨道尺寸没有共享。
.card-a { display: grid; grid-template-rows: auto 1fr auto; }
.card-b { display: grid; grid-template-rows: subgrid; grid-row: span 3; }.card-a 的行高由自身内容确定。.card-b 需要作为父 Grid 项目，并占三条父级行轨道；它的内部项目才会沿用那三行。示例只展示核心差别，父级仍需定义可共享的行。
子网格不等于全局对齐系统。它拿到的是父网格分配给自己的局部轨道范围；不同父网格之间，轨道仍不会自动共享。
范围、轴向与间距
grid-template-rows: subgrid 只共享行。如果列仍由卡片自己定义，列线不会自动和相邻卡片的列线对齐。需要双轴对齐时应分别判断父级是否在两个轴都提供合适的轨道，以及卡片实际跨越的范围。
子网格可在自身设置间距，视觉上可能与父级原有 gap 不同。调试时先看父级轨道线，再看卡片跨了几行几列，最后检查子网格内部的间距和项目对齐属性。只看到 subgrid 这个值，无法保证所有内容都齐。
排查“用了 subgrid 仍没对齐”时，先看两张卡是否真的跨同一组父级行线。如果一张卡被自动放到下一组隐式行，虽然都写了 grid-row: span 3，它们继承的不是同一段轨道，对齐线自然不同。再检查父级是否定义了所需行，卡片的内部标题、正文和按钮是否落在相应子网格行；仅检查 CSS 属性值是不够的。
容易答错的地方
- 认为写了相同的行模板就能跨卡对齐
- 独立嵌套 Grid 的
auto行按各自内容计算。若内容不同，模板字符串一样也不能保证行线位置相同。 - 认为子项能使用父级任意网格线
- 子网格只暴露自己跨越的那段父级轨道。越界定位不会穿透到父容器任意位置。
面试官还会怎么问？
可以一轴子网格、一轴普通网格吗？
可以。这是常见用法：共享需要对齐的行，列仍由组件自己管理。
子网格能修改 gap 吗？
能在子网格上指定自身间距；因此排查视觉错位时，除了轨道尺寸，还要核对父子两层的间距。
父 Grid 没有规划共享行怎么办？
先让卡片跨越目标行，并在父级定义合理轨道，再给卡片设子网格。若组件之间根本不需要跨卡对齐，独立嵌套 Grid 更简单。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。