使用 display: subgrid 并显式继承父级的 grid-template-columns，即可让子网格严格复用父级列宽，实现跨层级的尺寸对齐。具体做法是在子元素上设置 display: grid 和 grid-template-columns: inherit，这样子网格的列轨道将完全匹配父网格的定义，无需重复编写复杂的 minmax() 或 fr 单位。
如何定义支持嵌套的子网格结构
在父容器上定义标准的 grid-template-columns，并在需要嵌套的子元素上应用 subgrid 属性。通过 inherit 关键字，子网格自动获取父级的列定义，从而保持视觉上的严格对齐。
/* 父容器 */
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/* 子容器：继承父级列定义 */
.child {
display: grid;
grid-template-columns: inherit; /* 关键步骤 */
grid-template-rows: subgrid;
}如何处理子网格中的行高对齐
当子网格包含多行内容时，需同时设置 grid-template-rows: subgrid 以继承行高，或使用 span 语法跨越特定行。若只需列对齐，可省略行定义，仅依赖列的继承特性。
立即学习“前端免费学习笔记（深入）”；
/* 完整嵌套示例 */
.nested-item {
display: grid;
grid-column: span 2; /* 跨越两列 */
grid-template-columns: inherit;
grid-template-rows: subgrid; /* 继承行高 */
gap: 1rem;
}基于grid-template-columns继承的具体问题
当父级使用 repeat(4, minmax(100px, 1fr)) 时，子网格通过 inherit 会精确复制该表达式，确保子项宽度与父级列宽完全一致，避免手动计算导致的错位。
