CSS Grid 实现后台面板需三要素：父容器设 display: grid；用 grid-template-areas 定义区域模板（每行引号内区域名数一致，空位用.占位）；子元素设 grid-area 值与模板严格匹配。

用 CSS Grid 实现后台管理面板骨架，核心是用 grid-template-areas 定义语义区域，配合显式尺寸控制和滚动约束，而不是靠浮动、margin 或绝对定位硬凑。

必须写全的三要素

缺一不可，否则整个网格不生效：

• 父容器加 display: grid —— 语义标签如 <main></main> 或 <div class="app"> 自己不设就等于没开 Grid <li>用 <code>grid-template-areas 写布局模板，每行引号内区域名数量必须一致，空白处用英文句点 . 占位，比如：
  

  "header header header"<br>"nav main aside"<br>"footer footer footer"

• 每个子元素手动设 grid-area: "header"（注意：值不加引号，大小写、连字符必须和模板里完全一致）

侧边栏+头部+主内容的稳态写法

避免缩放错位或高度浮动：


响应式烟草公司HTML5网站模板
响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 列轨道写死：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 变量控制更安全