CSS Grid 实现后台面板需三要素：父容器设 display: grid；用 grid-template-areas 定义区域模板（每行引号内区域名数一致，空位用.占位）；子元素设 grid-area 值与模板严格匹配。
用 CSS Grid 实现后台管理面板骨架，核心是用 grid-template-areas 定义语义区域，配合显式尺寸控制和滚动约束，而不是靠浮动、margin 或绝对定位硬凑。
必须写全的三要素
缺一不可，否则整个网格不生效：
- 父容器加
display: grid—— 语义标签如或自己不设就等于没开 Grid- 用
grid-template-areas写布局模板，每行引号内区域名数量必须一致，空白处用英文句点.占位，比如："header header header"<br>"nav main aside"<br>"footer footer footer"
- 每个子元素手动设
grid-area: "header"（注意：值不加引号，大小写、连字符必须和模板里完全一致）侧边栏+头部+主内容的稳态写法
避免缩放错位或高度浮动：
- 列轨道写死：
grid-template-columns: 240px 1fr（别用minmax包裹固定宽，Safari 易出 bug） - 行轨道显式声明高度：
grid-template-rows: 64px 1fr（header 高度不依赖内容撑开） - 侧边栏响应式收起时，改用
grid-template-columns: 0 1fr+overflow: hidden，不删 DOM、不打断焦点流
main 区域滚动要同时满足三个条件
只写
overflow-y: auto没用：- 根容器（如
.app-layout）必须有明确高度，常用height: 100vh或由上层传入 -
main元素自身加min-height: 0（Grid 子项默认min-height: auto，会撑高容器） - 如果
main里面还嵌了 Flex/Grid，它的直系子容器也要加min-width: 0或min-height: 0，否则内部弹性项会突破限制
响应式切换时别只改模板
移动端单列不是只换
grid-template-areas就完事：- 桌面端是
"nav main aside"，移动端改成"nav"<br>"main"<br>"aside"
，对应每个子元素的grid-area值仍要是"nav"、"main"、"aside" - 若某区域在小屏隐藏（如
aside），不要留空，应设grid-area: auto或配合display: none - 避免在多个断点里重复写整条
grid-template-areas字符串，推荐用类名切换 + CSS 变量控制更安全
- 用
