最可控的后台主框架搭建方式是用 grid-template-areas 划分语义区域并配合 @media 重写整行字符串；只改 grid-template-columns 无法实现响应式，因其不改变区域映射关系，必须为每个断点提供完整合法的 grid-template-areas 值。
直接用 grid-template-areas 划分语义区域，再配合 @media 重写整行字符串，是目前最可控、最不易出错的后台主框架搭建方式。其他方案（比如只调 grid-template-columns 或混用 auto-fill）在小屏下极易导致侧边栏变形、卡片列数错乱、DOM占位失控。
为什么不能只改 grid-template-columns 就想实现响应式？
因为 grid-template-areas 是静态映射系统：它把区域名（如 "sidebar main"）和实际轨道位置强绑定。如果你只在 @media 里改了列宽，但没重写 grid-template-areas 字符串，浏览器仍会按原始三栏结构强行渲染——结果就是小屏下 sidebar 被压进第一列，文字换行、图标错位、甚至触发横向滚动条。
- 必须为每个断点提供完整、合法、引号包裹的
grid-template-areas值，例如："header nav main"→"header" "nav" "main" - 空区域统一用
.占位，不能留空格或写null - 所有区域名大小写、连字符必须严格一致，
grid-area: user-profile和grid-template-areas: "user_profile"不匹配
grid-template-columns 和 grid-template-rows 的写法边界在哪？
它们只负责“轨道尺寸”，不参与区域语义分配。侧边栏宽度必须显式声明（如 240px 或 minmax(200px, 250px)），主内容区用 1fr；绝不能把侧边栏塞进 repeat(auto-fill, minmax(...)) 里——那会让 Grid 把它当普通卡片算列数，小屏下直接被压缩到 280px 宽度，完全失去导航功能。
- 主内容区内部若需自适应卡片网格，应另套一层
display: grid容器，再用repeat(auto-fit, minmax(280px, 1fr))) -
auto-fit比auto-fill更适合卡片场景：前者只生成有内容的轨道并拉伸填满，后者会预留空轨道，窄屏下出现“看不见的列” - 子元素禁止设
width，否则破坏minmax()的弹性行为；可用max-width或不设宽
移动端双滚动条和高度塌陷怎么破？
根本原因是 1fr 缺少高度基准，且 overflow 未锁定。后台面板常见“整个页面可滚 + main 区域又单独滚”的嵌套滚动，体验极差。
立即学习“前端免费学习笔记（深入）”；
- 根容器（如
.app-layout）必须设height: 100vh或明确高度；在 React/Vue 中需靠父级传入或 JS 计算 -
main区域加overflow-y: auto，别只写overflow: auto（防横向溢出撑破布局） - 检查是否生效：开发者工具中选中父容器，确认
display为grid；选中子元素运行getComputedStyle(el).gridArea，返回空字符串说明没绑上
真正难的不是写出一套能跑的 Grid 代码，而是理解它不自动响应——grid-template-areas 不是模板引擎，不会根据屏幕“智能推导”新结构；它是一份精确的坐标说明书，每换一种设备形态，你就得亲手重写一遍区域地图。
