display: grid 是后台系统最稳布局方案，因其精确控制折叠/重排；需配齐 grid-template-areas、columns/rows，子元素设对应 grid-area，DOM 平级语义正确，overflow 与 height 约束须严格匹配。
用 display: grid 布局是最稳的选择，不是因为它“新”，而是它天然适配后台系统那种固定功能区、需精确控制折叠/重排的场景——flex 容易被内容撑变形，position: fixed 在滚动和响应式下容易错位，table 则直接踩中语义和可访问性红线。
grid-template-areas 必须配 grid-template-columns/rows 才生效
只写 grid-template-areas: "header header" "sidebar main" 是没用的，浏览器根本不会识别。必须同步定义列宽和行高：
-
grid-template-columns要明确写出各列尺寸，比如minmax(64px, 200px) 1fr—— 左侧菜单最小 64px（仅图标），最大 200px（带文字），右侧自适应 -
grid-template-rows推荐用64px minmax(0, 1fr) 40px，分别对应顶部导航、主内容区、底部状态栏；中间用minmax(0, 1fr)防止内容少时塌陷 - 每个子元素必须设
grid-area，值要和grid-template-areas中的命名完全一致（大小写、空格、引号内位置都不能错）
main 和 aside 必须同级，不能嵌套
把 放进 里再用 CSS 拉出来，是常见但危险的做法：屏幕阅读器会误读侧边栏为“主内容的一部分”，键盘焦点流也会错乱。
- 正确 DOM 结构是
、、、平级并列 -
只能出现一次，且应尽可能靠前（语义优先级），视觉顺序靠order或grid-column控制 - 小屏折叠时，用
aside { order: -1; }把它提到顶部，而不是display: none—— 后者会让辅助技术直接跳过
overflow 和 height 的组合必须卡死
后台内容区常动态加载表格、表单或图表，一旦滚动失效或双滚动条出现，基本就是 overflow 和 height 搭配错了。
-
必须设overflow-y: auto，且不能设固定height—— 它要随内容自然撑开，超出才滚动 - 它的父容器（比如
.layout）必须有明确高度约束，推荐height: 100vh或height: calc(100vh - 64px)（减去 header 高度） - 别给
设height: 100%，它会脱离 grid 行高上下文；改用max-height: calc(100vh - 104px)（减去 header + footer）并配overflow-y: auto
响应式切换时区域名要保持一致
移动端收起侧边栏不是“删掉它”，而是隐藏视觉、保留语义，并确保 grid-template-areas 名称不变——否则 JS 绑定或 ARIA 关联可能断裂。
- 小屏下用
@media (max-width: 768px)改写grid-template-columns: 1fr和grid-template-areas: "header" "main" "aside"，区域名仍为"header"、"main"、"aside" - 用
aria-hidden="true"+visibility: hidden替代display: none，保证 DOM 存在、焦点流连续 - 如果菜单项含图标+文字，收起时只隐藏文字（
overflow: hidden; white-space: nowrap; width: 64px），不删节点
真正难的不是第一次写出三块布局，而是加了弹窗、嵌了 iframe、接了图表库之后，它们还是否严格待在 里不破框——这取决于你一开始有没有把 grid 的区域边界、overflow 的触发条件、以及 height 的继承链钉死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
