Grid嵌套错位主因是父级grid-template-areas与子元素grid-area名称不匹配或子容器未设display: grid；须严格一致命名、显式声明子网格、合理设置justify-self/align-self，并避免隐式轨道干扰。
Grid 布局中嵌套子网格错位，通常不是 Grid 本身“出 bug”，而是 父容器的 grid-template-areas 定义与子元素的 grid-area 名称不匹配，或子元素未显式指定对齐方式导致默认行为干扰布局。关键在两层对齐逻辑：父级区域划分 + 子级内部定位。
检查 grid-area 名称是否严格一致
父容器用 grid-template-areas 定义区域名（如 "header header" "main sidebar"），子元素必须用 grid-area: header; 等**完全相同的字符串**匹配，大小写、空格、引号都不能差。
- 错误写法：
grid-area: Header;（首字母大写）或grid-area: "header ";（末尾多空格） - 正确写法：
grid-area: header;（纯小写，无引号，无多余空格） - 建议：把区域名全用小写+短横线（如
main-content），避免命名歧义
子网格需独立声明 display: grid
如果某个区域（如 main）内还要用 Grid 布局，它本身必须是 grid 容器——不能只靠父级划分就自动继承网格能力。
- 父级：
.layout { display: grid; grid-template-areas: "main sidebar"; } - 子级：
.main { display: grid; grid-template-areas: "top-card stats" "list list"; } - 漏掉
display: grid，子元素会按普通块级流渲染，看起来就像“错位”或“挤在一起”
控制子元素在区域内的对齐：justify-self / align-self
即使 grid-area 匹配成功，子元素在分配到的网格区域内仍可能居左、居顶（默认行为）。若想居中或拉满，需单独设置对齐属性：
立即学习“前端免费学习笔记（深入）”；
-
justify-self: center;—— 水平居中（行内轴） -
align-self: stretch;—— 垂直填满（块轴，默认就是 stretch，但显式写上更可控） - 也可统一用
place-self: center;同时控制两个方向 - 注意：这些属性作用于 子元素自身，不是父容器
避免隐式网格干扰显式区域
当子元素数量超出 grid-template-areas 定义的格子数，或存在未分配 grid-area 的子项，浏览器会创建隐式网格轨道，导致布局“漂移”。
- 确保每个直接子元素都明确设置了
grid-area，或用grid-column / grid-row手动定位 - 可加
grid-auto-flow: dense;让空缺区域被自动填充（慎用，可能打乱视觉顺序） - 调试技巧：给父容器加
outline: 1px solid red;，给每个子元素加outline: 1px dashed blue;，直观看区域是否套准
