嵌套 grid 需显式设置 display: grid，不自动继承；subgrid 可复用父网格线但兼容性有限；子网格定位基于自身坐标系，非父级线号。
grid 嵌套本身不触发新格式化上下文，但需显式定义 display: grid
很多人以为子容器只要在父 grid 里就会自动变成网格，其实不会。嵌套网格不是“继承”来的，而是要手动给子元素加 display: grid 或 display: inline-grid。否则它只是个普通块级元素，哪怕里面再放 grid-column 也没用。
常见错误现象：grid-column 在子元素上无效、子项堆叠在左上角、fr 单位不生效。
- 父容器设了
display: grid，子容器必须单独设display: grid才能成为嵌套网格 -
子网格的
grid-template-columns独立于父网格，不按父的列轨道缩放 - 嵌套网格默认不创建新的 BFC，若需隔离浮动/清除影响，得额外加
overflow: hidden或contain: layout
用 subgrid 复用父网格线（仅现代浏览器支持）
subgrid 是真正的“嵌套对齐”，让子网格直接复用父网格的行列线，而不是另起一套。但它目前只在 Firefox（111+）、Chrome（117+）、Edge（117+）中稳定支持，Safari 尚未实现。
使用场景：表头与数据行需严格对齐列宽，或卡片内部分区要和外层栅格节奏一致。
立即学习“前端免费学习笔记（深入）”；
- 必须同时设置
grid-column: subgrid和/或grid-row: subgrid - 父网格必须明确定义
grid-template-columns/grid-template-rows，不能用repeat(auto-fit, ...)这类动态语法 - 子元素不能再设
grid-template-columns，否则会覆盖subgrid行为
.parent {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
.child {
display: grid;
grid-column: subgrid; /* 复用父的三列 */
grid-template-rows: auto 1fr;
}嵌套网格的 grid-area 定位受父网格约束
子网格元素的 grid-area（或 grid-row/grid-column）坐标系是它自身所在的网格容器，不是最外层父容器。也就是说，它的行/列号从 1 开始计数，跟父网格的第几行无关。
容易踩的坑：误以为 grid-column: 2 / 4 是指“父网格的第 2 到第 4 条线”，实际是指“本子网格内部的第 2 到第 4 条线”。
- 嵌套越深，定位越容易混淆；建议给每层网格加
class命名（如layout-header、card-content-grid），避免全局线号冲突 - 调试时可用 Firefox DevTools 的“Grid Highlighter”，勾选 “Show line numbers” 查看当前网格的线号
- 若需跨多层对齐，优先考虑
subgrid，而非靠估算线号硬写
性能与可维护性：别为了嵌套而嵌套
三层以上 display: grid 嵌套会让 CSS 可读性骤降，且部分旧版浏览器（如 Safari gap 不生效、align-items 错位。
真实项目中更稳妥的做法：
- 两层嵌套（外层布局 + 内部模块）基本安全；三层起建议拆成独立组件或改用
flex处理局部排列 - 避免在
grid子项里再套grid+position: absolute，绝对定位会脱离网格流，导致尺寸计算异常 - 用
@supports (display: grid) and (grid-template-rows: subgrid)做渐进增强，subgrid回退到常规嵌套
复杂多层布局最难的从来不是怎么写出来，而是别人接手时能不能一眼看懂哪条线对应哪一层——命名、注释、限制嵌套深度，比炫技更重要。
