后台外层必须用 Grid 布局，内层组件用 Flexbox——因 Grid 支持二维区域划分与跨轨定位，而 Flexbox 仅适合一维线性排列；Grid 的 template-areas 实现语义化响应式，Flexbox 依赖 order 和隐藏易出错；卡片、工具栏等内层结构用 Flexbox 更轻量高效。
后台布局必须用 display: grid 控制外层骨架，内层组件用 display: flex 处理对齐和流式排列——这不是推荐，而是结构刚性决定的分工。
为什么后台外层不能只靠 Flexbox
后台典型结构包含固定 header、可折叠 sidebar、动态宽度 main、底部 status bar，还要支持拖拽重排、跨区域卡片（比如一个图表横跨两列+占半行）、多断点响应式切换。Flexbox 一次只能管一个方向：
-
flex-direction: column下无法让某个子项同时约束行高和列宽 -
flex-wrap: wrap在卡片高度不均时容易触发不可预测的重排抖动，尤其在实时数据看板中 - 想让一个菜单项横跨整行？
grid-column: 1 / -1一行解决；Flexbox 得加 wrapper + 再套一层flex，DOM 和调试成本直线上升
grid-template-areas 是后台语义化布局的核心
后台区域语义明确（header、nav、main、aside、footer），grid-template-areas 直接用字符串表达意图，比一堆 flex + order + display: none 清晰稳定得多：
- 桌面端：
"header header header" "nav main aside" "footer footer footer" - 平板断点只需改一行：
"header" "main" "footer"，侧边栏自动消失，无需 JS 或额外 class 控制显隐 - Flexbox 没有“区域”概念，靠
order调序时若漏设flex-basis: 0或width: 0，小屏下仍占空间，导致横向滚动
哪些内层结构必须交给 Flexbox
Grid 管骨架，但每个卡片、工具栏、表单内部仍是线性问题：
立即学习“前端免费学习笔记（深入）”；
- 卡片头部：图标 + 标题 + 操作按钮水平分布 →
display: flex; gap: 8px; align-items: center - 筛选栏：日期选择器 + 搜索按钮 + 重置按钮 →
flex-direction: row; justify-content: space-between - 表单字段垂直堆叠且
label和input左对齐 →flex-direction: column; align-items: flex-start，比 Grid 写grid-template-rows+justify-items更轻量 - 表格行内操作按钮组 →
flex-direction: row; gap: 8px，比 Grid 定义三列快得多
混用时最容易被忽略的细节
Grid 容器里的直接子元素才受 grid-column 控制；如果某张卡片内部用了 display: flex，那它的子项就不再响应父级 Grid 的轨道定位 —— 这不是 bug，是层级职责边界。常见翻车点：
- 在 Grid 容器里为对齐问题硬加一层
display: flexwrapper，其实该先查justify-items或place-self - 跨行跨列的卡片写了
height: 200px，结果破坏grid-auto-rows的自动计算逻辑，导致后续行错位 - 侧边栏折叠动画用
width: 0+overflow: hidden，不如 Grid 的grid-template-columns: 0fr 1fr+transition稳定，后者不会触发重排
