子容器声明 display: grid 即构成嵌套网格，无需特殊语法；它在父容器中作为独立网格项，同时自身为新网格上下文；subgrid 与之无关，仅复用父轨道线。
子容器直接声明 display: grid 就是嵌套网格
Grid 的嵌套不需要特殊语法或额外属性，只要子容器本身设置了 display: grid（或 display: inline-grid），它就自动成为父 Grid 容器中的一个独立网格项，同时自己又是一个新的网格上下文。浏览器原生支持，无需 polyfill。
常见误解是以为要靠 grid-template-areas 或 subgrid 才能“嵌套”，其实二者完全无关：subgrid 是让子网格复用父网格的轨道线（目前仅 Firefox 原生支持，Chrome 125+ 实验性开启），而常规嵌套就是普通子元素设为 grid。
嵌套后父容器的 grid-area 和对齐属性仍生效
子网格容器在父布局中仍是一个“格子”，所以它的尺寸、位置、对齐行为由父容器的 grid-column/grid-row、justify-self、align-self 等控制；它内部的子元素则只受它自己的 grid-template-columns 等影响，互不干扰。
注意点：
立即学习“前端免费学习笔记（深入）”；
- 如果父容器给子网格设了
width或min-width，可能挤压其内部网格轨道计算，尤其当内部用fr单位时 -
place-items: center在父容器上不会居中子网格的子元素，只居中子网格这个“盒子”本身 - 子网格默认
box-sizing: border-box，但若父容器有padding，需确认是否影响子网格可用宽度
避免常见错觉：不是所有“看起来嵌套”的都是 grid 嵌套
以下情况 不是 Grid 嵌套：
- 父
display: grid，子display: flex—— 这是 Grid + Flex 混合布局，非嵌套网格 - 父
display: grid，子display: block且内部再用display: grid—— 此时那个“再用 grid”的元素才是嵌套起点，中间的block层只是普通容器 - 用了
grid-template-areas并在里面写了多层名字 —— area 名字不传递，子容器必须显式声明display: grid才启动新网格
验证方法：选中子容器，在开发者工具中看 computed display 是否为 grid 或 inline-grid，且其子元素的 grid-column 等属性可生效。
性能与可维护性提醒
嵌套层级过深（比如 grid → grid → grid）会让 CSS 轨道计算变复杂，尤其配合 fit-content()、minmax() 或大量 auto-fit 时，可能触发多次 layout 回流。
建议：
- 嵌套不超过两层（父 grid → 子 grid），第三层改用 flex 或常规块流
- 子网格避免在
grid-template-columns中混用fr和固定像素值，除非明确需要弹性收缩 - 用
grid-auto-flow: dense要格外小心，嵌套内启用可能导致不可预测的填充顺序
真正容易被忽略的是：子网格的 gap 默认不继承，每次都要单独设；很多人以为父设了 gap: 1rem，子网格也会有间隔，实际完全不会。
