嵌套Grid容器的网格结构不由盒模型决定，而依赖逐层显式声明display: grid；grid-template-columns不继承，子容器须独立定义，否则错位或堆叠；subgrid尚未广泛支持，多层嵌套易致性能下降。
嵌套 Grid 容器本身不依赖 CSS3 盒模型（box-sizing、margin、padding 等）来“构建网格结构”，盒模型只影响单个元素的尺寸计算和内外间距；真正定义嵌套网格的是 display: grid 的逐层声明——你不能靠调 padding 或 border-box 让子元素自动对齐外层列线。
为什么 grid-template-columns 不会继承到子容器
这是最常被误读的一点：嵌套的 div 设了 display: grid，它内部的 grid-template-columns 完全独立，不会从父级“拿”过来。浏览器没做这层继承逻辑，subgrid 也还没落地（Chrome 127+ 开始有限支持，但 Safari / Firefox 仍缺或受限）。
常见错误现象：
外层设了 grid-template-columns: 1fr 2fr 1fr，内层没写列定义，结果所有子项堆在第一列；或者写了 1fr 1fr 却发现和外层列宽错位。
- 必须显式给每个嵌套
display: grid容器写grid-template-columns（哪怕只是1fr） - 若需视觉对齐，用
grid-column: 2 / 4这类定位手动匹配外层列号，而不是指望“自动继承” -
grid-template-areas在嵌套中只作用于直系子元素，孙子级写grid-area: "sidebar"会被忽略
嵌套超过 3 层时性能明显下降的信号
Chrome DevTools 的 Layers 面板里出现大量重叠的 “Grid Overlay” 图层，滚动卡顿、resize 延迟、Safari 下 layout 时间飙升——这不是 bug，是当前渲染引擎对多层 grid layout 的计算开销真实存在。
立即学习“前端免费学习笔记（深入）”；
- 典型结构如：
body → section → article → card → header + content + footer（5 层） - 缓解方式：3 层以上优先用
display: flex替代内层简单排列（比如 card 内部用 flex 横排图标+文字） - 避免在
@media或:hover中切换grid-template-columns，改用grid-column单属性动画更轻量 - 对稳定不变的嵌套 grid 容器加
contain: layout style paint，提示浏览器跳过重排
IE11 下嵌套 grid 完全不可用的现实
IE11 只支持旧版 display: -ms-grid，且不支持嵌套 grid 容器。任何尝试都会退化为块级流：grid-column 失效、auto-placement 不可靠、间隙（gap）全无。
- 别用
@supports (display: grid)包裹嵌套逻辑——IE11 过不了检测，但即使过了，嵌套也跑不起来 - 兼容方案只有两个：降级为 float + media query，或用
display: flex手动模拟简单嵌套 - 如果项目必须支持 IE11，建议把嵌套 grid 当作“增强功能”，核心布局走 flex 或 JS 补丁
真正难的不是写多少层 display: grid，而是每层都得手动算列号、控范围、防断层；subgrid 普及前，所谓“嵌套”本质是多个独立 grid 的视觉对齐工程。
