grid-template-areas 无效通常因格式错误导致全盘失效：每行区域名数量必须一致，仅用单/双引号且不混用，空白只能用"."，grid-area值须与模板中字符串完全匹配，行列数需与grid-template-rows/columns严格对应。
grid-template-areas 无效？大概率不是写错了，而是浏览器静默忽略——它不报错，只当没这回事。
grid-template-areas 字符串格式必须严格对齐
每行引号内的区域名数量必须完全一致，否则整条声明被丢弃。这不是“部分生效”，是全盘失效。
- 错误写法：
grid-template-areas: "header header" "nav main" "footer"→ 第三行只有 1 个词，前两行都是 2 个，列数不匹配 - 正确写法：
grid-template-areas: "header header" "nav main" "footer footer"→ 补齐到相同列数 -
.是唯一合法的空白占位符，不能用空格、空字符串或省略 - 所有行必须用同一种引号（双引号或单引号），不能混用；复制粘贴时容易带入全角空格或换行符，建议在控制台检查
getComputedStyle(container).gridTemplateAreas是否返回"none"
grid-area 值必须与 template-areas 中的字符串字面量完全一致
grid-area 不是类名、不是选择器，就是纯字符串匹配。大小写、连字符、下划线、有无空格，差一点都不行。
- 模板里写的是
"header header"，子元素就得写grid-area: header，不能写grid-area: "header"（引号是错的） - 也不能写
grid-area: site-header，哪怕你加了 class="site-header" —— 它只认 template 里出现过的那个词 - 推荐命名习惯：
user_avatar✅，user-avatar❌，UserAvatar❌ - JS 动态插入元素后，必须手动设
element.style.gridArea = "main"，不会自动继承或推断
响应式切换时 template-areas 和 grid-area 必须同步更新
只改 grid-template-areas，不调整子元素的 grid-area，布局会塌陷——因为新模板里没有旧名字，元素就“无家可归”，退回流式排列。
立即学习“前端免费学习笔记（深入）”；
- 桌面端：
grid-template-areas: "nav main aside"，对应元素分别设grid-area: nav/main/aside - 移动端想竖排，不能只写：
@media (max-width: 767px) { .container { grid-template-areas: "nav" "main" "aside"; } } - 还必须确保子元素在该断点下仍能匹配新模板，比如保持
grid-area不变（只要名字还在新模板中）；如果名字变了（如把aside改成drawer），就得同步改子元素的grid-area - 媒体查询里的
grid-template-areas值要用单引号包裹整个声明，每行用双引号，例如：md:grid-template-areas: '"nav main" "nav aside"'
grid-rows / grid-cols 必须与 template-areas 行列数匹配
grid-template-areas 隐含了行列结构，但浏览器不会自动帮你生成对应轨道。若显式定义了 grid-template-rows 或 grid-template-columns，其数量必须和模板的行数、列数一致，否则区域无法对齐。
- 模板是
"header header" "nav main" "footer footer"（3 行 × 2 列），就要配grid-template-rows: auto 1fr auto和grid-template-columns: 1fr 1fr - 漏掉
grid-template-rows？浏览器用隐式行高，可能导致header和footer高度失控 - 用 Tailwind 时，
grid-rows-[auto_1fr_auto]这种自定义值必须和模板行数严格对应，多一行少一行都会让区域“悬空” - 嵌套网格中，内层容器若也用
grid-template-areas，需独立声明自己的grid-template-rows/columns，不能依赖外层
最常被忽略的一点：template-areas 的“文本感”是假象——它背后是严格的二维坐标系统，每一处空格、换行、引号都参与解析。调试时别只看样式效果，先查 getComputedStyle 返回值是否是你写的那个字符串。
