grid-template-areas 必须每个断点重定义，因其是静态布局草图，浏览器仅按当前生效字符串分配区域，不缩放不重排；漏写会导致横向滚动或高度失控，且需严格对齐引号内单词数、用.占位、同步覆盖rows/columns。
用 grid-template-areas + 媒体查询是最稳的方案，别信“一套代码适配所有屏幕”的说法——它必须在每个断点里重写整套区域结构，否则小屏照样横着挤，卡片压成细条还不出错提示。
为什么 grid-template-areas 必须每个断点都重定义
它不是开关，是静态草图。浏览器只按当前生效的字符串分配位置，不会缩放、不会重排。你桌面端写 "header header sidebar"，小屏下不覆盖，它就真把三个区域硬塞进一行，结果要么横向滚动，要么高度失控。
- 常见错误：只改
grid-template-columns却漏掉grid-template-areas，DOM 元素还在旧位置“站桩”，视觉错乱但控制台安静如鸡 - 每行引号内单词数量必须严格对齐，缺位得用
.占位，空格或留空会导致整条声明被浏览器忽略 -
grid-template-rows和grid-template-columns必须同步覆盖，否则未定义维度会回退到默认行为（比如小屏漏设columns，所有区域被强行塞进一列，高度全崩）
移动端优先怎么写才不闪、不跳、不丢状态
别用 JS 动态删 DOM 或切 class——SSR 渲染错乱、页面闪动、状态丢失全找上门。纯 CSS 就能扛住，关键是“全量覆盖”。
- 基础结构（
max-width: 768px）：grid-template-areas: "header" "nav" "main" "sidebar" "footer"，配套grid-template-rows: auto auto 1fr auto auto，不设grid-template-columns（让浏览器默认单列） - 桌面端（
min-width: 769px）完整重写：grid-template-areas: "header header header" "nav main sidebar" "footer footer footer"，并明确写死grid-template-columns: 240px 1fr 320px -
grid-area值（如header、main）全程不变，DOM 结构零修改
主内容区（main）内部卡片网格怎么防崩
别用 width: 33.333% 写死百分比——文字换行撑高卡片、空数据时塌缩、内容高度不一致，都会导致网格上下跳跃、间隙错乱、甚至裁剪。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：在
.main内部嵌套一层 Grid，用auto-fit + minmax()让列数动态适应容器宽度 - 推荐写法：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，配合gap: 1.5rem - 卡片自身不设固定宽高，靠内容自然撑开；需要等高时，父容器加
align-items: stretch，卡片加height: 100%
最易被忽略的是：区域名大小写敏感、不能含中划线（live-metrics ❌，live_metrics ✅），以及小屏下隐藏侧边栏时，不能只靠 display: none——得同步设 grid-area: auto，否则它还在原区域占位，可能把 footer 挤跑。
