父容器必须显式设置 display: grid，否则 grid-template-areas 无效；区域名须与 grid-area 值逐字符一致（大小写、空格、符号均敏感），且不支持 css 变量或局部覆盖。
直接给父容器加 display: grid，否则 grid-template-areas 一行代码都不会生效。
grid-template-areas 不生效？先查 display 和区域名匹配
最常踩的坑是：写了 grid-template-areas: "header nav" "main main"，但子元素 grid-area 写成 "nav "（末尾带空格）或 "Nav"（大小写错），或者父容器根本没设 display: grid。
- 父容器必须显式声明
display: grid—— 子元素加没用，语义标签如<header></header>自己加也没用 -
grid-area值必须和grid-template-areas中出现的字符串**逐字符一致**：不能有前后空格、不能混用连字符/下划线、不能大小写混用 - 用
console.log(JSON.stringify(el.style.gridArea))检查 JS 动态注入的值，避免不可见字符干扰 - IE11 完全不支持
grid-template-areas，Safari 10.1+ 才稳定支持多行字符串
移动端堆叠布局：用 @media 切换整套 areas
grid-template-areas 不支持“局部覆盖”，比如不能只改某一行。要实现桌面三栏、移动端单列，必须在每个 @media 块里重写完整结构。
- 桌面端：
grid-template-areas: "header header header" "nav main sidebar" "footer footer footer" - 平板（≤1024px）：
@media (max-width: 1024px) { grid-template-areas: "header" "nav" "main" "sidebar" "footer"; } - 手机（≤768px）：
@media (max-width: 768px) { grid-template-areas: "header" "main" "footer"; }—— 此时nav和sidebar可通过display: none或grid-area: .隐藏 - 每行必须用引号包裹，空单元格统一用
.，不能留空格或写null
fr 和 minmax() 混用控制真实可用的伸缩行为
纯 fr 分配容易撑爆内容区，纯像素值又不响应式。后台面板常见需求是「侧边栏固定 240px、主内容最小 600px、右侧工具栏最大占 50%」——这得靠 minmax() 和 fr 组合。
- 典型写法：
grid-template-columns: 240px minmax(600px, 1fr) minmax(320px, 50%); - 别写
minmax(240px, 240px)代替固定值，Safari 有可能渲染异常 - 如果侧边栏要折叠，优先用
grid-template-columns: 0 1fr+overflow: hidden，比display: none更稳（保焦点、不触发 DOM 重排） -
gap不继承，子容器若也是 Grid，必须单独设自己的gap
命名区域太多反而难维护，重点在分层抽象
不要给每个按钮、每个卡片都起个 grid-area 名。区域名本质是语义占位符，不是 HTML ID；一个 main 区域内部，该用 Flexbox 或嵌套 Grid 去排版细节。
- 推荐层级：
header/nav/main/sidebar/footer—— 5 个足够覆盖 95% 后台骨架 - 复杂仪表盘中，
main区域内再用嵌套 Grid 排布图表、表格、操作栏，而不是把所有小模块都拉到顶层命名 - CSS 变量无法在
grid-template-areas中使用，想动态切布局只能靠 JS 切 class 或服务端渲染 - 超长区域字符串（如 10 列 × 6 行）在移动端 Safari 偶有解析延迟，单行建议不超过 8 个区域名
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
