grid-template-areas必须配合媒体查询重写，不能只写一次；需在移动端、平板、桌面断点分别定义区域结构，且子元素grid-area值须严格匹配大小写与空格，同时确保html/body高度继承及容器min-height:100vh。
grid-template-areas 必须配合媒体查询重写，不能只写一次
很多人以为给容器设个 grid-template-areas: "header main sidebar" 就算完成响应式——结果小屏下侧边栏硬挤在主内容右边，横向滚动条弹出来。根本原因是：这个声明是静态快照，浏览器不会自动“理解”你希望它在手机上堆叠。真正起作用的是在不同断点里用 @media 重新定义整套区域结构。
- 移动端优先写单列：
grid-template-areas: "header" "nav" "main" "sidebar" "footer" - 平板（≥768px）切两栏：
grid-template-areas: "header header" "nav main" "sidebar main" "footer footer" - 桌面（≥1024px）三栏：
grid-template-areas: "header header header" "nav main aside" "footer footer footer" - 每行引号内字符串列数必须一致，缺位用
.占位；含中划线（如main-content）或数字开头的区域名会直接让整条声明失效
所有子元素必须显式声明 grid-area，且名字大小写严格匹配
DOM 元素的 class 或结构不用动，但每个区域项必须写 grid-area: header（无引号）、grid-area: sidebar。名字不区分大小写？错——Header 和 header 是两个不同区域，浏览器直接忽略匹配失败的项，导致该元素脱离网格流、位置飘移或高度塌陷。
-
grid-area值必须和grid-template-areas中引号内的字符串完全一致（包括空格与大小写） - 别依赖父容器自动分配；漏写一个
grid-area，对应区域就“消失”，其他项会自动填补空缺，布局全乱 - 区域名建议全小写+下划线，避开保留字（如
auto、none）
容器高度上下文必须手动撑满，height: 100vh 不够用
即使写了完整的 grid-template-areas，页面仍可能底部留白、滚动条意外出现，或者 1fr 区域只占半屏——问题往往不在 Grid 本身，而在 html/body 没继承到视口高度。
- 必须写：
html, body { margin: 0; padding: 0; height: 100%; } - Grid 容器推荐用
min-height: 100vh，不是height: 100vh；否则内容超长时会被裁剪 - 禁用
overflow: hidden，它会掩盖因盒模型错误导致的真实溢出问题 - 如果某区域背景图不显示，大概率是该区域高度为
auto且没设min-height或aspect-ratio
卡片类内容别硬套 grid-template-areas，改用 auto-fit + minmax()
仪表盘里一堆指标卡片，用 grid-template-areas 写死三栏，在 iPad 上太挤、在手机上又只剩一列还留大片空白——这种场景不适合语义化区域划分，该换思路。
- 主内容区（如
.main）直接设：display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))); gap: 1.5rem; -
auto-fit会收缩空轨道，auto-fill则保留空位；多数情况选auto-fit - 卡片跨列用
grid-column: span 2，但它只作用于当前断点，不会自动继承到其他媒体查询中 - IE 不支持
auto-fit，需 fallback 到传统媒体查询方案
grid-template-areas。少一个，布局就在某个设备上突然“塌方”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
