引号在grid-template-areas中是必需的，漏掉会导致声明无效；每行须用引号包裹，列数一致，空单元格用英文句点“.”，命名需符合CSS标识符规则（不可数字或短横线开头）。
grid-template-areas 里引号是必须的，不是可选格式
浏览器解析 grid-template-areas 时，把整个值当作一个字符串字面量处理，引号（单或双）是语法必需部分。漏掉引号会直接导致声明无效，整条 CSS 被忽略——你不会看到报错，但布局完全不生效。
常见错误现象：grid-template-areas: header header sidebar; main main sidebar; 这种写法看起来整齐，实际被当成三个独立的无意义标识符，浏览器跳过该声明。
- 必须用引号包裹每行定义，例如：
grid-template-areas: "header header sidebar" "main main sidebar" - 引号内单词之间用空格分隔，每个单词对应一个命名区域（如
header、main），.（英文句点）代表空单元格 - 所有行引号内的列数必须一致，否则网格结构断裂——比如第一行 3 个词，第二行只有 2 个，就会出错
命名区域名不能含短横线或数字开头
你在引号里写的那些名字（比如 "sidebar aside-footer" 中的 sidebar 和 aside-footer），本质是 CSS 标识符，受 CSS 命名规则约束。
容易踩的坑：grid-template-areas: "user-profile actions" 看起来合理，但 user-profile 含短横线，无法被 grid-area 正确引用；同理 1st-section 开头是数字也不行。
立即学习“前端免费学习笔记（深入）”；
- 只允许字母、数字、下划线
_、短横线-—— 但短横线不能出现在开头或连续出现（如-header或head--er都非法） - 推荐用小写字母 + 中划线组合（如
nav-bar），只要不以数字或短横线起始就安全 - 如果用了非法名，
grid-area: user-profile会静默失败，对应区域不被分配
空单元格必须用英文句点 .，不能留空格或写 null
非规则布局常需要“跳过”某些格子，比如左上角放 logo，右侧留空，再右边放搜索框——这时候中间那个位置就得显式标为空。
错误写法："logo search"（中间两个空格）或 "logo null search"，这两种都不会创建空单元格，反而让浏览器误判列数或识别出非法标识符。
- 必须用单个英文句点
.占位，且前后需有空格（如"logo . search"） - 可以连续写多个
.表示连续空列，如"logo . . search"是合法的 4 列定义 -
.是唯一被认可的“空”语义符号；写成""（空字符串）、none、auto全都不起作用
响应式切换模板时，引号内容要整体替换，不能只改某一行
很多人想在媒体查询里只覆盖某几行模板，比如桌面端 3 行，移动端只改最后一行。但 grid-template-areas 是原子性声明，浏览器不支持“局部更新”。
典型翻车现场：在 @media (max-width: 768px) 里只写 grid-template-areas: "header" "main" "footer"，结果发现 header 没撑满、footer 错位——因为没重写全部行，旧模板残留影响了新结构。
- 每次修改
grid-template-areas，都必须提供完整的新模板字符串，行数、每行列数都要重新对齐 - 移动端常见做法是改成单列：
grid-template-areas: "header" "main" "sidebar" "footer"，四行各一个词，每行引号内只有一个名称 - 别试图用
grid-template-areas: unset回退到默认行为——它不会恢复成 auto-flow，而是彻底清空模板，可能引发意外重排
最麻烦的地方在于：引号、点号、命名合法性、行列对齐这四件事得同时满足，缺一不可。少一个引号，整个声明作废；多一个空格，列数就算错；名字带非法字符，对应区域就挂掉——它们不报错，只沉默失效。
