必须先给父容器加 display: grid，否则 grid-template-areas 静默失效；需确保每行引号内单词数一致、grid-area 值与模板严格匹配（大小写、空格、符号）；三行结构需设 height: 100vh 并配 1fr 行高，main 加 overflow-y: auto 和 min-height: 0；响应式需重排 template-areas 而非仅调列宽；空单元格必须用 . 占位；区域名是字面量字符串，非 class 或变量。
必须先给父容器加 display: grid，否则所有 grid-template-areas 声明都静默失效。
为什么写了 grid-template-areas 却没效果
浏览器不会报错，但整条声明会被忽略——最常见原因就三个：
- 父容器（比如
.app-layout）漏了display: grid；子元素自己加、<header></header>标签加、甚至用 JS 设置style.display = "grid"都没用，必须作用在直接包裹子元素的容器上 -
grid-template-areas每行引号内单词数不一致，例如"header header"和"nav main sidebar"混用，第二行多一个词，整条规则作废 - 子元素的
grid-area值和模板字符串不逐字符匹配：大小写错（Headervsheader）、末尾多空格（sidebar）、用了下划线（side_bar）或引号（grid-area: "main"）都会失败
三行结构（Header / Main / Footer）怎么写才自适应
光写 grid-template-areas: "header" "main" "footer" 不够，1fr 需要高度基准才能生效：
- 根容器（如
.app-layout）必须设height: 100vh或明确高度；仅靠min-height: 100vh不足以支撑1fr分配 -
main区域要加overflow-y: auto，否则内容超长时会触发页面整体滚动 +main内部滚动（双滚动条） -
main元素本身还得加min-height: 0，否则嵌套 Flex/Grid 时可能继承min-height: auto导致撑不开 -
grid-template-rows必须提供对应行数的值，比如三行模板就得写三个，如60px 1fr 60px；漏掉某一项会导致区域塌陷或错位
侧边栏+主内容区（Nav / Main / Sidebar）怎么避免移动端错位
响应式切换不能只改列宽，区域结构必须重排，否则 DOM 还在网格里占位：
- 桌面端用
grid-template-areas: "header header header" "nav main sidebar" "footer footer footer" - 平板断点（≤1024px）建议改成单列堆叠：
@media (max-width: 1024px) { .layout { grid-template-areas: "header" "nav" "main" "sidebar" "footer"; } } - 手机断点（≤768px）可隐藏非核心区域：
grid-template-areas: "header" "main" "footer";，同时给nav和aside加grid-area: .或display: none - 每行引号内必须用
.表示空单元格，不能留空、不能写null、不能省略；.算一个“词”，用于保持每行列数一致
最容易被忽略的是：区域名是纯字符串字面量，不是 class 名自动映射，也不是 CSS 变量；JS 动态插入的元素，必须显式设置 element.style.gridArea = "main" 才能落位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
