必须设 display: grid，否则 grid-template-areas 等所有网格属性均不生效；常见失效原因有三：父容器未设 display: grid、每行引号内单词数不一致、子元素 grid-area 值与模板字符串逐字符不匹配。
必须设 display: grid，否则所有 grid-template-areas、grid-template-columns 都不生效——这是 90% 布局失败的根源。
为什么写了 grid-template-areas 却没效果
浏览器不会报错，但整条声明会被静默忽略。最常见原因就三个：
- 父容器（如
.app-layout）漏了display: grid；子元素自己加、语义标签加、组件内部加都无效 -
grid-template-areas每行引号内单词数不一致，比如桌面端写"header header" "nav main" "footer footer"，移动端只写"header" "main" "footer"，第三行少一个词，整行失效 - 子元素的
grid-area值与模板字符串逐字符不匹配：大小写错（Headervsheader）、末尾多空格（"sidebar "）、含中划线（"main-content"）、或误加引号（grid-area: "header"是错的，应为grid-area: header）
验证是否生效：在控制台运行 getComputedStyle(el).gridArea，返回空字符串说明没绑上。
主内容区（main）不自适应、滚动失效
1fr 不是魔法，它需要明确高度基准才能分配空间。若父容器高度为 auto，1fr 就无从计算。
- 根容器（如
html、body、.app-layout）必须设height: 100%或min-height: 100vh -
main元素自身必须加min-height: 0（默认是auto，会撑开容器） -
main内部若嵌套了 Flex/Grid，其直系子容器也要加min-width: 0或min-height: 0，否则弹性项会突破限制 - 显式设
overflow-y: auto，别只写overflow: auto——横向溢出可能撑破侧边栏或表格列宽
侧边栏固定 + 主内容两列卡片自适应
不能把侧边栏塞进 repeat(auto-fill, ...)，否则小屏下它会被强行压窄、文字换行、图标错位。
- 用
grid-template-areas显式划分区域："sidebar main"，再配grid-template-columns: 240px 1fr - 主内容区（
main）内部再套一层 Grid，用grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)))控制卡片列数 - 小屏下光改
grid-template-columns: 1fr不够，必须同步加.sidebar { display: none; }（visibility: hidden仍占位） - 务必设
gap: 1rem控制卡片间距；旧版 Safari 需补-webkit-gap: 1rem - 卡片内若含
<table> 或长 URL，必须加 <code>min-width: 0和overflow-wrap: break-word，否则 Grid 会优先保内容而非守列宽响应式切换时区域重排总出错
移动端把三栏压成单列，不能只改父容器的
grid-template-areas，必须同步更新所有关联项。- 桌面端结构：
"header header header" "nav main sidebar" "footer footer footer" - 移动端需覆盖为：
"header" "main" "footer"，同时确保nav和sidebar的grid-area值也改为""或移除，否则它们仍在网格中占位 - 媒体查询里要覆盖整个列定义，而不是只调某列宽度；优先级冲突时，用 DevTools 的 “Computed” 面板确认生效的
grid-template-columns确实是你写的那条 - IE11 完全不支持
grid-template-areas和fr单位，降级方案得提前准备，比如用calc(100vh - 60px)替代1fr
真正难的不是写对语法，而是每层嵌套都得手动管住
min-width、min-height、overflow和display—— 少一个，滚动就失控，少两个，布局就塌缩。 - 桌面端结构：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
