grid-template-areas必须在每个媒体查询断点中完整重定义，因其是静态布局草图而非响应式开关；需同步设置grid-template-rows和columns，命名语义化、大小写敏感、用"."占位，嵌套Grid优于width百分比。
grid-template-areas 不能只写一次就完事，必须配合媒体查询为每个关键断点单独重写整套区域结构。
为什么 grid-template-areas 必须在每个断点里重定义
它不是“响应式开关”，而是静态草图：浏览器只按当前生效的 grid-template-areas 值分配元素位置，不会自动缩放或重排。你写一套三栏布局，小屏下照样横着塞，结果要么横向滚动条弹出，要么卡片被压成细条。
常见错误是只改 grid-template-columns 却漏掉 grid-template-areas，导致 DOM 元素仍按旧结构定位，视觉错乱但控制台不报错。
- 区域名大小写敏感、不能含中划线（
live-metrics❌，live_metrics✅） - 每行字符串列数必须严格对齐，缺位用
"."占位，否则整条声明被浏览器忽略 -
grid-template-rows和grid-template-columns必须同步覆盖，否则未定义维度回退到默认行为（比如小屏下漏设grid-template-columns，所有区域会被强行挤进一列，高度失控）
移动端单列堆叠怎么写才不崩
别用 JS 动态删 DOM 或切 class——页面会闪、状态丢失、SSR 渲染错乱。纯 CSS 就能稳住，关键是“全量覆盖”而非“局部修补”。
立即学习“前端免费学习笔记（深入）”；
先写基础结构（移动端优先）：
.dashboard {
display: grid;
grid-template-areas: "header" "nav" "main" "sidebar" "footer";
grid-template-rows: auto auto 1fr auto auto;
}
再用 @media (min-width: 769px) 覆盖为桌面端三栏：
@media (min-width: 769px) {
.dashboard {
grid-template-areas: "header header header"
"nav main sidebar"
"footer footer footer";
grid-template-rows: 60px 1fr 40px;
grid-template-columns: 240px 1fr 320px;
}
}
- 所有
grid-area值（如header、main）全程保持不变，DOM 结构零修改 - 小屏下不设
grid-template-columns，让浏览器默认单列；设了反而可能干扰自动换行 - 主内容区（
main）内部要用嵌套 Grid，别用width: 33.333%硬写百分比
主内容区卡片网格为什么不能用 width 写死
文字换行撑高卡片、空数据时塌缩、不同卡片内容高度不一致——最终表现为上下跳跃、间隙错乱、内容被裁剪。这不是样式问题，是布局模型选错了。
真正抗压的做法是在 main 区域内嵌一层 Grid：
.dashboard-main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
-
auto-fit比auto-fill更适合卡片类场景：空余空间会被均分，不会留白列 - 卡片自身不设固定宽高，靠内容自然撑开；用
height: 100%+ 父容器align-items: stretch保证等高 - 避免用
margin控制卡片间距，统一用gap，否则嵌套 Grid 时 margin 折叠逻辑会干扰布局
容易被忽略的兼容性与维护细节
区域命名必须全程语义化（live_metrics、user_summary），而不是 area-1 这类编号。一旦后期加模块或调顺序，硬写行列线（如 grid-column: 2 / 4）会导致整行偏移，调试时得反复数线，还容易漏掉 span 冲突。
更隐蔽的问题是：这类写法和 DOM 结构强耦合，加个 wrapper div，子元素就不再是直接网格项目，布局直接失效。
真正健壮的做法只对容器设 display: grid，所有子元素用 grid-area 匹配命名区域——新增模块只需在 grid-template-areas 字符串里加个词，再给对应元素设 grid-area，其他区域完全不受影响。
