grid-template-areas 必须配合子元素的 grid-area 使用才能生效，仅定义命名区域地图而无对应 grid-area 声明会导致区域留空；字符串内空格和换行敏感，需严格对齐行列数并用“.”占位；响应式切换应重写整套字符串，区域名须符合CSS标识符规则且大小写敏感。
grid-template-areas 必须和 grid-area 配合才能生效
单独写 grid-template-areas 不会自动把任意子元素塞进对应区域——它只是定义了一张“地图”，每个格子叫什么名字；真正决定哪个元素去哪的，是子元素自己设的 grid-area 值。
- 父容器用
grid-template-areas划出命名区域（如"header header" "main sidebar"） - 每个直接子元素必须显式声明
grid-area: "header"、grid-area: "main"等，名字要完全一致（包括引号） - 名字不匹配、拼错、漏写
grid-area，对应区域就留空，布局会塌掉 - 重复使用同一名称（比如两个元素都设
grid-area: "sidebar"）会导致它们重叠在同一个区域
字符串换行和空格敏感，别用缩进对齐来“美化”模板
grid-template-areas 的值是一组用引号包裹的字符串，每行字符串代表 Grid 的一行，字符串内用空格分隔列。浏览器按字面解析，**换行符和多余空格都会被当作分隔符处理**，不是排版装饰。
- 错误写法：
grid-template-areas: "header header" "main sidebar";
——中间多个空格会被解析成多个列，导致列数不一致报错 - 正确写法：每行字符串内只用单个空格分隔区域名，且所有行列数严格相等：
grid-template-areas: "header header" "main sidebar";
- 如果某列不想放内容，必须用
.（英文句点）占位，不能留空字符串或空格
响应式中改 grid-template-areas 比改 grid-template-columns 更直观
当需要在不同断点切换整体区块顺序（比如移动端把 sidebar 挪到 main 下方），直接重写 grid-template-areas 字符串，比手动调 grid-column 和 grid-row 更易读、少出错。
- 桌面端：
grid-template-areas: "header header" "main sidebar" - 移动端：
grid-template-areas: "header" "main" "sidebar" - 注意：所有断点下，每个子元素的
grid-area名称保持不变，只需改父容器的地图 - 别试图在媒体查询里只改某一个区域的位置（比如只动
sidebar），必须重写整套字符串，否则语法不合法
区域名不能含空格、连字符或数字开头，且大小写敏感
grid-area 值作为 CSS 标识符，受 CSS 命名规则约束。名字写错，区域就找不到，子元素不会自动 fallback 到其他位置。
立即学习“前端免费学习笔记（深入）”；
- 合法：
"header"、"navLeft"、"content-2"（注意：连字符允许，但grid-area值仍需加引号） - 非法：
"main content"（空格）、"1st-section"（数字开头）、"Footer"（若模板里写的是"footer"，大小写不匹配就失效） - 建议统一小写 + 连字符，例如
"site-header"，避免大小写混淆 - HTML 中的
id或class名和grid-area名没有关系，别指望靠 class 自动映射
grid-area，或者地图字符串里多敲了空格、少写了 . 占位——这两处一错，整个布局就静默失败，控制台还不报错。 
