grid-area 值必须与 grid-template-areas 中定义的名称完全一致，且父容器需声明 display: grid 和 grid-template-areas；空单元格用 . 占位，响应式中须整行重写 grid-template-areas。
grid-area 名称必须和 grid-template-areas 里的一致
直接写 grid-area: header 是无效的，除非你在容器上用 grid-template-areas 显式定义过 "header ..." 这样的字符串。CSS Grid 的命名区域是双向绑定：一边在容器用引号定义布局模板，一边在子项用 grid-area 指定归属。
常见错误是只设子元素的 grid-area，却忘了在父容器加 grid-template-areas，结果所有区域都塌缩到第一行第一格。
- 父容器必须声明
display: grid和grid-template-areas - 每个
grid-area值必须是grid-template-areas中出现过的单词（大小写、空格、连字符都要完全匹配） - 未被引用的区域名不会自动创建，也不会报错，只是被忽略
导航区域通常对应 header + nav 组合，别硬塞进单个 area
实际页面中，header 和 nav 往往语义分离：一个是页面顶部栏，一个是主导航菜单。强行把它们合并成一个 grid-area: "header" 会丢失结构语义，也不利于响应式断点调整。
更合理的做法是拆开：
立即学习“前端免费学习笔记（深入）”；
grid-template-areas: "header header header" "nav main sidebar" "footer footer footer";
然后分别设置：
-
header元素：grid-area: header -
nav元素：grid-area: nav -
main元素：grid-area: main -
aside元素：grid-area: sidebar -
footer元素：grid-area: footer
空单元格用英文句点 . 表示，不能留空格或写 null
想让某个网格位置“空着”，比如侧边栏只在桌面显示，移动端隐藏，不能写成：
grid-template-areas: "header header" "nav main " "footer footer";
末尾空格会被浏览器忽略，第二行实际变成 "nav main"，导致列数不一致而整个声明失效。正确写法是用 . 占位：
grid-template-areas: "header header" "nav main" "footer footer";
或者明确留空：
grid-template-areas: "header header" "nav main" "footer footer";
注意：. 必须单独成词，前后有空格，且不能和相邻单词连写（如 "nav.main" 是非法语法）。
响应式切换时，grid-template-areas 要整块重写，不能只改某一行
媒体查询里不能只覆盖某一行的 grid-template-areas，比如这样是无效的：
@media (max-width: 768px) {
grid-template-areas: "header" "nav" "main" "footer";
}
因为 grid-template-areas 是一个完整字符串值，部分更新会被丢弃。必须重复整个声明：
@media (max-width: 768px) {
grid-template-areas:
"header"
"nav"
"main"
"footer";
}
否则旧布局残留，nav 可能还卡在第二列，或和 header 重叠。这也是最容易被忽略的调试盲点——你以为改了，其实没生效。
