grid-template-areas 必须用引号包裹每行字符串，否则整条规则被静默丢弃；区域名大小写敏感、不可数字开头，需列数一致并用.占位空白；grid-area仅作用于直系子元素且值不加引号。
grid-template-areas 的引号问题直接决定布局是否生效
不加引号的 grid-template-areas 声明会被浏览器静默丢弃——你看到的不是“错位”，而是根本没走 Grid 流程，元素退回普通文档流。比如写成：
grid-template-areas: header header / main sidebar;
解析器会拆成 grid-template-areas: header 和非法值 header 两条，整条规则作废。
必须每行用单引号或双引号包裹：
grid-template-areas: "header header header" "nav main ads" "footer footer footer";
- 引号内空格数不影响解析，但列数必须严格一致（每行都是 3 个词）
- 点
.表示空白单元格，不能留空字符串或纯空格 - 区域名只允许字母、数字、下划线，且不能数字开头；
main-content、1st-section都非法
grid-area 必须显式设在直系子元素上
grid-area 不是选择器，是纯字符串匹配。哪怕多一个空格、大小写错一位、或写在嵌套层里，就完全失效。
立即学习“前端免费学习笔记（深入）”；
- 子元素必须是
display: grid容器的**直接子元素**；.wrapper > .main不会响应grid-area: main -
grid-area值**不加引号**（除非含非法字符，但应避免）：grid-area: sidebar✅，grid-area: "sidebar"⚠️（部分旧浏览器或预处理器忽略） - 同一区域名可在模板中重复出现（如两行都写
"sidebar sidebar"），对应多个元素会叠在相同位置，需靠z-index控制层序
媒体查询中 grid-template-areas 的列数一致性是硬约束
在 @media 里重写 grid-template-areas 是响应式的唯一方式，但有个关键限制：所有断点下，每行的**列数（空格分隔的词数）必须完全相同**。否则该媒体查询分支被静默忽略，布局当场崩掉。
- 桌面端写三列：
"header header header"→ 每行 3 个词 - 移动端改两列，不能只写
"header header"+"main footer"就完事——必须保证仍是 3 列，比如："header header ."+"main . footer"，用.占位补足 - 区域名集合要保持一致（比如所有断点都定义了
sidebar），否则某断点下grid-area: sidebar元素无处可去，回退到默认位置
命名网格线 vs grid-template-areas：什么时候该换种写法
grid-template-areas 适合结构固定、语义明确的区域划分（如仪表盘、文章页）。但它不适合动态卡片流、瀑布流或频繁增删模块的场景——每次调整都要重写整块字符串，极易漏掉空格或列数对齐。
- 需要自由跨行跨列、斜向对齐、叠加定位时，直接用网格线更稳：
grid-column: 2 / span 3、grid-row: 1 / -1 - 想让侧边栏在小屏下从左移到顶部？
grid-template-areas得重写模板；而用grid-row/grid-column只需改一两个属性 - 真正复杂的响应式，往往是混合策略：主框架用
grid-template-areas，内部模块用网格线精确定位
最易被忽略的一点：grid-template-areas 的“区域”只是命名占位，不带任何语义绑定；header 和 Header 是两个不同区域，大小写敏感，复制粘贴时多一个空格就失效——这种错误不会报红，只会让你花半小时对着“正常”的代码发呆。
