grid-template-areas 必须配合 display: grid 才生效，且仅作用于直系子元素；main 区域滚动需同时满足根容器有明确高度、main 设 min-height: 0、嵌套子项加 min-width/min-height: 0；响应式切换时 grid-template-areas 与 grid-area 必须同步更新。
grid-template-areas 必须配 display: grid 才生效
写了 grid-template-areas 却没反应？不是语法错，是父容器漏了 display: grid。Grid 布局只作用于直系子元素，子元素自己加 display: grid 或用 class 名自动映射都无效。
常见失效场景：
- 父容器是语义标签（如
<main></main>）但没设display: grid - 用了 React/Vue 组件封装，但样式写在子组件里，父级容器未启用 Grid
- 误以为
.header { grid-area: header; }能让 class="header" 的元素自动落位——实际必须先在grid-template-areas字符串里声明"header"这个区域名
验证是否生效：在控制台运行 getComputedStyle(el).gridArea，返回空字符串说明没绑上。
main 区域滚动失效的三个硬性条件
写了 overflow-y: auto 但 main 还是不滚动？根本原因是 Grid 的 1fr 不提供高度约束，它只分配“已有高度内的空间”。要让它可滚动，必须同时满足：
- 根容器（如
.app-layout）设height: 100vh或明确高度（嵌套在框架中时需父级传入或 JS 计算） -
main元素自身加min-height: 0（Grid 子项默认min-height: auto，会撑开容器） -
main内部若嵌了 Flex/Grid，其直接子容器也要加min-width: 0或min-height: 0，否则弹性子项会突破限制
别只写 overflow: auto ——横向溢出可能撑破侧边栏或表格列宽。
响应式切换区域时 grid-template-areas 和 grid-area 必须同步更新
移动端把三栏压成单列，不能只改父容器的 grid-template-areas。比如桌面端是：
"header header header" "sidebar main chart" "footer footer footer"
移动端必须同时：
- 改成单列模板：
"header" "sidebar" "main" "chart" "footer"
- 确保每个子元素的
grid-area值仍与新模板中的区域名完全一致（大小写、空格、无中划线） - 避免用
"user list"这类含空格的区域名，应统一为user-list或userlist
IE11 不支持 fr，回退方案用 grid-template-rows: 60px calc(100vh - 60px) auto，注意 calc() 内运算符两侧必须有空格。
区域命名和 fr 单位的实际取舍点
grid-template-areas 适合语义清晰、模块数量稳定的大结构（如后台的 header/sidebar/main/footer），但不适合动态增删模块的场景；fr 单位简洁，但依赖容器有明确高度基准——这点常被忽略。
真正容易踩坑的是嵌套：main 区域内部再用 Grid 做卡片列表时，外层 1fr 和内层 repeat(auto-fit, minmax(240px, 1fr)) 之间没有继承关系，必须各自独立约束高度与最小尺寸。
区域名是纯字符串字面量，不是变量、不支持 var(--name)，JS 动态插入的元素必须显式设置 element.style.gridArea = "main"，否则不会识别。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
