用grid-template-areas实现报纸排版可行但需严守拼图规则：每行引号数必须一致，区域名大小写与grid-area值完全匹配，空位用.占位，跨行列靠重复命名，响应式时模板与grid-area须同步更新。
直接用 grid-template-areas 实现报纸排版是可行的，但必须按“拼图规则”写，错一个引号、少一行、名字大小写不一致，整条规则就失效，元素全退回流式布局。
grid-template-areas 每行引号数必须严格一致
CSS 解析器把每组双引号看作一行轨道定义，引号内空格分隔列，换行分隔行。少一组引号，等于少定义了一行网格轨道，整条 grid-template-areas 声明被标记为 invalid value，DevTools 里该属性会被划掉，所有子元素失去区域归属。
- 错误写法：
grid-template-areas: "header header" "nav main";（两行） vs"footer footer"（第三行漏了引号包裹，实际成了两个独立声明） - 正确写法：必须三组独立双引号，哪怕某行全是
.：grid-template-areas: "header header header" "nav main main" "footer footer footer"; - 不能合并成一个长字符串：
"header header header nav main main footer footer footer"是非法值
区域名必须与 grid-area 值完全匹配（含大小写和空格）
grid-area 的值是纯字符串匹配，不是变量或类名。写成 grid-area: header;，但 grid-template-areas 里写的是 "head" 或 "Header"，就完全不生效。
- 区域名只能含字母、数字、短横线，禁止空格、下划线、点号：
main-content合法，main content和main_content都非法 -
grid-area属性值本身不加引号：grid-area: header;✅，grid-area: "header";❌（CSS 层面语法错误） - JS 动态插入元素后，需手动设
element.style.gridArea = "main"，不会自动识别 class 名
跨行跨列必须靠重复命名，不能靠 span
grid-template-areas 不支持 span 语法，想让一个区域横跨两列，就在同一行里重复写两次名字；想跨两行，就在上下两行对应列位置写同一个名字。
立即学习“前端免费学习笔记（深入）”；
- 标题占顶部两行三列：
grid-template-areas: "title title title" "title title title" "nav main aside"; - 右侧边栏只占右上一格：
"nav main aside"中aside出现在第一行，第二行对应位置就得写.或另一个名字，不能留空或错位 - 空单元格必须用
.占位，且每行列数一致："main . sidebar"合法，"main sidebar"（缺一个位置）会导致整行解析失败
响应式切换时 grid-template-areas 和 grid-area 必须同步更新
媒体查询里只改 grid-template-areas，却不确保每个子元素仍有有效 grid-area 值，布局会塌陷——因为新模板里没声明的名字，对应元素直接退出网格，回到文档流顶部左侧。
- 桌面端：
grid-template-areas: "header header header" "nav main aside"→ 子元素需有grid-area: header、grid-area: nav等 - 移动端改成单列：
@media (max-width: 768px) { .container { grid-template-areas: "header" "nav" "main" "aside"; } }→ 此时仍要求每个子元素保留各自的grid-area值，否则无效 - Safari ≤15.4 可能跳过未在当前断点中声明的区域名，所以所有用到的
grid-area值，最好在所有断点都存在（哪怕没被引用）
真正难的不是写出第一版模板，而是当产品临时要求“头条图跨两行+右侧加标签+作者栏右对齐”时，你得立刻判断：该改 grid-template-areas 字符串，还是该加 justify-self，又或者得回头补一条缺失的 grid-template-rows ——这些边界条件，比语法本身更消耗调试时间。
