grid-template-areas必须在父容器display: grid上声明，子元素仅靠grid-area指向名称无效；需确保每行区域名数量与grid-template-columns列数严格一致，否则静默失效。
直接用 grid-template-areas 配合类名切换就能实现，但必须在父容器上显式声明所有区域，子元素仅靠 grid-area 指向对应名称——否则命名区域根本不会生效。
grid-template-areas 必须写在父容器上，且不能只靠子元素设 grid-area
常见错误是给 .login 和 .register 分别加 grid-area: "login" 和 grid-area: "register"，却没在父容器里用 grid-template-areas 定义这些名字。结果就是浏览器完全忽略区域名，两个模块按普通流堆叠或错位。
正确做法是：父容器统一声明完整区域结构，子元素共享同一区域名（如都设为 main），再通过类名控制显隐或定位：
-
grid-template-areas必须写在父级display: grid容器上，缺了这句，其他 grid-area 全无效 - 移动端和桌面端的区域布局可以不同，但每行区域名数量要一致（比如都是两列，就不能一行写两个名、另一行只写一个）
- 区域名大小写敏感：
"Header"和"header"是两个不同区域 - 复制粘贴时容易混入不可见 Unicode 空格（如
\u2028），整条grid-template-areas声明会静默失效
用类名切换 grid-template-areas，而不是 JS 动态拼接
不要在 JS 里写 el.style.gridTemplateAreas = "header main footer"，Safari 旧版不支持，SSR 渲染时还容易首屏错位。更稳的方式是预定义好所有主题/断点对应的完整字符串，用 CSS 类名切换：
- 桌面端：
.layout-desktop { grid-template-areas: "header header" "sidebar main" "footer footer"; } - 手机端：
.layout-mobile { grid-template-areas: "header" "main" "sidebar" "footer"; } - 切换时只改 class，不触发动态样式计算，避免 layout 抖动
- 如果区域名有空格或换行，必须用双引号包裹，且引号内不能有多余空格，否则解析失败
移动端堆叠、桌面端并排时，grid-template-columns 怎么配才不翻车？
区域命名解决“放哪”，列轨道定义解决“多宽”。二者要配合，否则区域虽对了，但列数不匹配会导致内容溢出或塌陷：
- 移动端单列：
grid-template-columns: 1fr;或grid-template-columns: minmax(0, 1fr);（后者防高度继承异常） - 桌面端两栏：
grid-template-columns: 250px 1fr;，其中侧边栏固定，主内容弹性 - 别用
calc(var(--cols))这种嵌套写法——calc()内部不解析var()，整条声明会被丢弃 - 变量默认值必须带引号：
var(--cols, "1fr 2fr")比var(--cols, 1fr 2fr)更稳妥，尤其在 Firefox 和旧 Safari 中
最易被忽略的是：grid-template-areas 的每一行区域名数量，必须严格等于 grid-template-columns 的列数。少一个或多一个，整行区域就失效，回退到普通文档流——这种错误没有报错，只能靠肉眼比对或 DevTools 里检查 computed 样式是否被划掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
