如何用CSS Grid实现后台管理页面布局？

必须给父容器加 display: grid，否则 grid-template-areas 等声明无效；常见原因包括父容器缺失该声明、区域行数不匹配、grid-area 值与模板字符串不完全一致；1fr 需父容器有高度基准；响应式应重排 grid-template-areas 而非硬调列数。

必须给父容器加 display: grid，否则所有 Grid 布局声明都无效——这是 90% 的布局失败根源。

为什么 grid-template-areas 写了却没效果

浏览器不会报错，但整条声明会被静默忽略。最常见原因就三个：

1. 父容器（如 .app-layout）漏了 display: grid —— 子元素或 <header> 标签自己加没用
2. grid-template-areas 每行引号内单词数不一致，比如 "header header" 和 "nav main" 是两列，第三行却只写 "footer"，必须补成 "footer footer" 或用 "footer ."
3. 子元素的 grid-area 值和模板字符串不完全匹配：大小写错（Header vs header）、末尾多空格（"nav "）、含中划线（main-content），甚至误加引号（grid-area: "header" 是错的，应写 grid-area: header）

1fr 不自适应？先检查容器有没有高度基准

1fr 不是魔法，它需要父容器有明确高度才能分配空间。若根容器高度为 auto，1fr 就无从计算。

1. 根容器（如 .app-layout）必须设 height: 100vh 或由 Vue/React 父组件传入固定高度
2. main 区域要加 min-height: 0，否则嵌套 Flex/Grid 时可能继承 min-height: auto 导致撑不开
3. 内容超长时，必须显式加 overflow-y: auto，否则会触发页面整体滚动 + main 内部滚动（双滚动条）
4. 避免混写单位，比如 60px1fr 或漏单位的 60，整行轨道会塌陷

移动端切换三栏变单列，别硬调 grid-column

响应式不是靠给每个断点重复写行列值，而是统一用语义化区域，再重排结构。

1. 桌面端：grid-template-areas: "header header header" "nav main sidebar" "footer footer footer"
2. 平板端可改为：grid-template-areas: "header header" "nav main" "sidebar sidebar" "footer footer"
3. 手机端直接切单列：grid-template-areas: "header" "nav" "main" "sidebar" "footer"
4. 注意：所有断点里 grid-area 值必须和当前 grid-template-areas 中出现的字符串**逐字符一致**，否则元素仍按文档流排列

真正容易被忽略的是：Grid 区域名是纯字符串字面量，不支持 CSS 变量、不映射 class 名、不自动识别语义标签；JS 动态插入的元素，必须手动设 element.style.gridArea = "main" 才能落位。