完全合法，且是 css grid 的原生能力；所有现代浏览器（chrome 57+、firefox 52+、safari 10.1+、edge 16+）均支持嵌套 display: grid 容器，无需前缀或 polyfill。
嵌套 Grid 容器是否合法？浏览器支持如何？
完全合法，且是 CSS Grid 的原生能力。所有现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+）都支持嵌套 display: grid 容器，无需前缀或 polyfill。
关键点在于：每个设置了 display: grid 或 display: inline-grid 的元素，都会创建一个独立的网格上下文——它不继承父网格的轨道定义，也不受父网格项对齐属性的直接约束（除非显式设置 align-items/justify-items 等）。
子 Grid 如何避免被父 Grid 的 grid-template-areas 或 grid-area 锁死尺寸？
常见错误是把子容器写成 grid-area: sidebar; 后，发现内部无法再用 grid-template-areas 布局——其实问题不在嵌套本身，而在于父级给该区域分配的尺寸太死板，导致子 Grid 没有足够空间展开。
- 父级应优先用
grid-template-columns+fr单位（如1fr 3fr），而非固定像素或minmax(300px, 1fr)这类限制过强的写法 - 子 Grid 容器自身需明确设置
width或min-width（尤其在父项为fit-content时），否则可能塌缩 - 若父级用了
grid-area，确保对应grid-template-areas中该区域未被设为span 1 / 1以外的窄范围
嵌套时 align-content 和 justify-content 在哪一级生效？
这两个属性只作用于**当前网格容器自身的行/列轨道整体**，不影响其子网格容器的位置。子 Grid 的定位由它在父网格中的对齐方式（justify-self、align-self）或父网格的 justify-items/align-items 控制。
立即学习“前端免费学习笔记（深入）”；
