子网格（Subgrid）允许嵌套网格继承父网格的行或列轨道，解决对齐问题；通过display: subgrid并设置grid-template-columns/rows为subgrid实现，适用于仪表盘等需对齐的复杂布局，提升一致性与灵活性。
在CSS Grid布局中，实现嵌套网格的关键在于理解子网格如何继承和利用父网格的结构。通过合理使用grid属性和subgrid，可以创建高度灵活且结构清晰的嵌套布局。
什么是子网格（Subgrid）
子网格允许一个网格容器内的项目本身成为网格，并继承父网格的行或列轨道。这解决了传统嵌套中子网格无法对齐父网格的问题。
目前subgrid在Firefox中支持较好，在Chrome、Safari等浏览器中可通过开启实验性功能使用，但标准语法正在逐步推进。
subgrid，可采用常规嵌套方式模拟类似效果。- 子网格使用
display: grid或display: subgrid - 它能继承父级的
grid-template-rows或grid-template-columns - 避免重复定义轨道，提升布局一致性
使用Subgrid实现真正嵌套
当子元素需要跨越父网格的多个轨道并对齐时，subgrid是最佳选择。
立即学习“前端免费学习笔记（深入）”；
.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto auto;
gap: 10px;
}
.child {
display: subgrid;
grid-column: span 2;
grid-row: span 2;
/* 继承父级的列和行定义 */
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}在这个例子中，.child占据两个列和两个行的空间，并将内部的子项按父级的轨道进行对齐，实现无缝嵌套。
兼容性方案：普通嵌套Grid
在不支持subgrid的环境中，可以通过手动设置子网格的轨道来模拟相似效果。
.parent {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
}
.nested-container {
grid-column: span 4;
display: grid;
grid-template-columns: repeat(4, 1fr); /* 手动匹配所需跨度 */
gap: 10px;
}虽然需要重复定义轨道，但这种方式广泛兼容所有现代浏览器。
- 确保子网格的
grid-template-columns与父级对应区域一致 - 使用CSS自定义属性（变量）统一管理轨道尺寸，便于维护
- 结合
minmax()和fr单位增强响应性
实际应用场景
常见于仪表盘、卡片组件或复杂表单布局中，其中每个模块需对齐整体栅格系统。
例如一个仪表板：
```css .dashboard { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto; gap: 15px; }.widget { grid-column: span 2; display: subgrid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
<p>这样，<code>.widget</code>内部的内容会自然对齐到主网格的两列范围内，保持视觉整齐。</p> 基本上就这些。掌握<code>subgrid</code>的使用逻辑和降级策略，就能在不同环境下实现一致的嵌套Grid布局。
