嵌套grid容器的子项不继承父容器的grid-template-columns，因subgrid尚未普及；各层需独立定义网格，手动对齐列号，避免跨层依赖和grid-template-areas断层；深层嵌套影响性能，建议3层内用flex替代，IE11完全不支持。
grid容器嵌套时子项不继承父容器的grid-template-columns
子网格（subgrid）还没普及，目前所有主流浏览器里，嵌套的div用display: grid后，它内部的列/行定义完全独立——不会自动沿用外层的轨道划分。这是最常让人误以为“嵌套失效”的根源。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 外层容器定义整体布局（比如三栏），内层容器需显式声明自己的
grid-template-columns，哪怕只是1fr 1fr或repeat(2, 1fr) - 若想视觉对齐，靠
grid-column-start/grid-column-end手动对齐列号（例如外层第2列起始是2，内层也设grid-column: 2 / 4） - 避免用
grid-area跨多层隐式依赖，容易在响应式下错位
用grid-template-areas做嵌套区域命名容易断层
grid-template-areas只作用于直系子元素，嵌套一层后，孙子元素无法直接参与父容器的区域命名映射。强行写名字会报无效语法，或者被忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只在外层容器用
grid-template-areas划分大区块（如"header header" "nav main" "footer footer"） - 每个命名区域内部，改用
grid-template-columns+grid-template-rows重新建网格，不再用grid-template-areas - 如果真需要跨层语义化，用
class名配合grid-column定位更可控，比如class="sidebar-section"配grid-column: 2
嵌套grid性能下降明显时的典型表现和缓解方式
Chrome DevTools 的 Layers 面板里能看到大量“Grid Overlay”图层重叠，滚动卡顿、resize事件响应迟滞，尤其在Safari里更明显——这不是bug，是当前渲染引擎对多层grid layout的计算开销真实存在。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 超过3层嵌套（body → section → article → card）就该警惕，优先考虑用
display: flex替代内层简单排列 - 避免在
:hover或@media里动态切换grid-template-columns，改用grid-column单属性动画更轻量 - 用
contain: layout style paint包裹稳定不变的grid容器，提示浏览器跳过重排重绘
IE11兼容性下根本不能用嵌套grid
IE11只支持旧版display: -ms-grid，且不支持嵌套grid容器。任何尝试都会退化为块级流，grid-column等属性全失效，连auto-placement都不可靠。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别试图用
@supports (display: grid)兜底嵌套逻辑，IE11根本不识别这个条件 - 如果必须兼容IE11，整个布局链路得降级：外层用
float或inline-block，内层用flex，放弃grid嵌套幻想 - 现代项目若已放弃IE，可在
postcss里加autoprefixer并明确设browsers: ['> 1%', 'not dead']，避免无谓的兼容代码污染
嵌套grid真正难的不是写法，而是判断哪一层该停手——多数时候，第二层grid已经足够，第三层开始就要问一句：这里是不是其实只需要margin或gap就能解决？
