结论是“谁管哪层”：Grid负责页面语义区域划分（如header/main/footer），Flexbox负责区域内内容排列（如导航栏里的logo+nav+search）；二者分层协作，非二选一。
直接说结论：不是“选哪个”，而是“谁管哪层”——Grid 负责页面语义区域划分（header/main/footer），Flexbox 负责区域内内容排列（如导航栏里的 logo + nav + search）。
什么时候该用 display: grid 做外层布局
当你需要在不同屏幕尺寸下，保持区块语义不变但重新组织行列结构时，grid-template-areas 是唯一可维护的解法。
- 桌面端五区：
"header header header" "sidebar main aside" "footer footer footer" - 平板三区：
"header header" "main main" "footer footer" - 手机单列：
"header" "main" "footer"—— 仅改一行 CSS，语义不乱、DOM 不动 - 某区块需跨行又占半宽？
grid-column: 2 / span 1; grid-row: 1 / span 2;直接定位，不用嵌套 wrapper - 侧边栏从固定宽变为可折叠抽屉？用
grid-template-columns: 0fr 1fr+transition，比 Flexbox 的width/max-width组合更可控
注意陷阱：gap 在 Safari 14.1+ 才稳定；IE11 只支持旧版 -ms-grid，不支持 gap、subgrid、auto-fit，实际项目中基本不可用。
什么时候该用 display: flex 做内层对齐
当布局本质是“一维流”——比如导航栏、表单控件组、卡片列表、按钮组——flex-wrap: wrap、flex: 1、align-items: center 天然契合响应式需求。
- 移动端折叠侧边栏？直接对某项设
display: none，其余项自动撑满，不用改布局定义 - 子项高度不一致但要等高？默认
align-items: stretch就生效，无需额外 hack - 动态增减菜单项？Flex 不依赖预设轨道数，新增后自动排列，DOM 和 CSS 都干净
-
height: 100%在 flex 子项里常失效，因为父容器没显式高度；改用min-height: 0或显式设height才能触发继承
两栏/三栏自适应布局，为什么 grid 更稳
Flexbox 做两栏本质是“让项目换行并平均占宽”，容易因内容高度不均导致错行、漏对齐；Grid 是二维布局，grid-template-columns 一行锁死列结构，不受子项内容高度影响。
- 基础两栏：
display: grid; grid-template-columns: 1fr 1fr; gap: 16px; - 降为单栏（≤767px）：
@media (max-width: 767px) { grid-template-columns: 1fr; } - 防塌陷加一行：
grid-auto-rows: minmax(120px, auto); - Flexbox 必须配齐三项：
flex-wrap: wrap+ 每项flex: 0 0 calc(50% - 8px)+ 父容器margin: -4px抵消 gap，且务必设box-sizing: border-box
真正容易被忽略的不是“选哪个”，而是容器尺寸约束和溢出行为——没有显式高度或 min-height 的 flex 容器，子项的 align-items: stretch 会静默失效；Grid 中未定义 grid-auto-rows 时，空行可能塌陷成 0 高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
