仪表盘外层必须用display: grid，因其支持行列协同、跨格定位与响应式轨道控制；内层组件用display: flex处理单向排列与对齐，二者是职责分层的刚性分工。
复杂后台仪表盘必须用 display: grid 控制外层骨架，内层组件用 display: flex 做对齐——这不是折中方案，而是职责分层的刚性分工。
为什么仪表盘外层不能只靠 Flexbox？
后台仪表盘典型结构包含固定 header、可折叠 sidebar、动态宽度 main 区域、底部 status bar，还要支持拖拽重排、跨区域卡片（比如一个监控图表要横跨两列+占半行）、响应式断点切换（桌面→平板→窄屏）。Flexbox 一次只能管一个方向，flex-direction: column 下无法让某个子项同时约束行高和列宽；flex-wrap: wrap 在卡片尺寸不均时容易触发不可预测的重排抖动，尤其在频繁更新数据的实时看板中。
常见错误现象：justify-content 在没设 grid-template-columns 的 Grid 容器里失效，但反过来，Flex 容器里根本没法写 grid-row 或 grid-column ——不是语法报错，是压根没这个属性。
- 需要跨行跨列定位卡片？必须用
grid-column: 1 / span 2+grid-row: 2 / span 1 - 侧边栏折叠动画要平滑无重排？
grid-template-columns: 0fr 1fr配合transition，比 Flex 的width: 0+overflow: hidden更稳 - 不同屏幕下自动调整列数？
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))一行搞定，Flex 得靠@media+flex-basis+calc()补位，漏一个断点就横向滚动
哪些内层结构必须用 Flexbox？
Grid 管骨架，但每个卡片、表单、工具栏内部仍是线性排列问题。比如一个带图标、标题、操作按钮的卡片头部，或筛选条件栏里的日期选择器+搜索按钮+重置按钮水平分布——这些全是单向内容流，Flexbox 更轻、更兼容、更可控。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：align-items: stretch 在 Flex 中默认拉平子项高度，适合卡片内图文对齐；Grid 中同效果得写 align-items: stretch + 所有轨道设 min-height，否则子项高度由内容决定，视觉上参差不齐。
- 导航菜单横向居中？
justify-content: space-between+align-items: center两行解决，Grid 里若没定义列轨道，所有菜单项会挤进第一列 - 表格行内操作按钮堆叠？
flex-direction: row+gap: 8px，比 Grid 写三列还快 - 表单字段垂直堆叠且 label 和 input 对齐？
flex-direction: column+align-items: flex-start，Grid 要额外设grid-template-rows和justify-items
混用时最易忽略的细节
Grid 容器里的直接子元素才受 grid-column 控制；如果某张卡片内部用了 Flex，那它的子元素不会继承外层 Grid 的轨道信息——这是层级隔离，不是 bug。
真正容易被忽略的是：Grid 的 grid-auto-flow: dense 在后台仪表盘中慎用。当卡片动态增删、尺寸不一，dense 会把小卡片往前塞，破坏你用 grid-area 定义的逻辑区域顺序，导致运维人员拖拽后布局错乱。默认 grid-auto-flow: row 更可预测。
还有，不要在 Grid 容器上同时设 gap 和 padding 再套 Flex 子项——Flex 的 gap 会叠加 Grid 的 gap，间距翻倍。统一用 Grid 的 gap 控制外层，子项内用 Flex 的 gap 或 margin 即可。
