grid-template-areas 必须用引号包裹字符串，每行一个带空格分隔列名的字符串，点（.）占位空单元格且行列数需一致，区域名须与子元素 grid-area 值严格匹配。
grid-template-areas 必须用引号包裹字符串
直接写 grid-template-areas: header main footer 会报错，CSS 解析器会把它当成三个独立标识符，而不是一个区域定义行。必须用单引号或双引号包成一整串，比如：grid-template-areas: "header header" "main sidebar" "footer footer"。
每对引号内是一行区域命名，空格分隔列，换行（或分号后新起一行）表示下一行。引号内外的空白（包括换行、缩进）会被忽略，但引号内单词之间至少一个空格不能少——否则两个区域名会被合并成一个，比如 "headermain" 就不是 header 和 main 两块。
命名区域必须和 grid-area 值完全一致
给子元素设置 grid-area 时，值必须和 grid-template-areas 中出现的名称严格匹配（大小写、连字符、下划线全算），且不能是 CSS 关键字（如 auto、none、content）。
常见错误：
立即学习“前端免费学习笔记（深入）”；
- 父容器写了
"header content sidebar"，子元素却写grid-area: main→ 不生效 - 区域名用了
user-profile，子元素写grid-area: user_profile→ 不匹配 - 区域名是
nav，但子元素设了grid-area: navigation→ 没关联
点（.）代表空单元格，不能省略也不能写错
空白位置必须用英文点 . 占位，且每个区域行的列数要一致。比如三列布局，每行都得有三个项（可以是名字或 .）：
grid-template-areas: "header header header" "nav . sidebar" "main main main" "footer footer footer";
如果某行少写一个 . 或多写一个名字，整条规则会被浏览器忽略——整个 grid-template-areas 失效，退回到默认网格流。
注意：. 是字面量，不是类名或选择器；写成 ""、none 或留空都不行。
响应式中重定义 grid-template-areas 要整行替换
媒体查询里不能只改某一行，比如不能只写 grid-template-areas: "header" "main" "footer"（单列）来覆盖原三列定义——必须提供完整的新布局字符串，行列数可不同，但每行内部仍需引号包裹、点占位、名称匹配。
实际建议：
- 移动端优先：先写单列
"header" "nav" "main" "sidebar" "footer" - 桌面端加
@media (min-width: 768px)，再写多行多列版本 - 避免在同一个断点里混用不同行数的定义，容易漏掉某行导致整条规则失效
区域命名本身不支持通配或变量，每次重定义都是全新字符串匹配——这也是它比纯 grid-column / grid-row 更易读、但也更难动态生成的原因。
