Grid负责页面骨架，Flexbox负责组件内部排列；Grid适用于需同时控制行和列的二维布局（如圣杯布局、卡片墙），Flexbox适用于一维弹性排列（如导航栏、按钮组），二者混合使用时推荐“Grid容器+Flex项目”组合。
Grid 负责页面骨架，Flexbox 负责组件内部排列——这不是建议，而是现代布局的事实标准。
什么时候该用 display: grid？
当你需要同时控制行和列的结构关系时，display: grid 是唯一合理选择。比如定义 header、main、sidebar、footer 的整体区域划分，或实现卡片墙、仪表盘、图库这类多行多列的二维结构。
- 用
grid-template-areas命名区域后，HTML 结构可完全脱离视觉顺序，语义更清晰 -
repeat(auto-fit, minmax(250px, 1fr))这类写法能自动适配容器宽度，无需媒体查询就能响应式分列 - 避免在
grid容器里强行模拟“垂直居中”：它天生支持place-items: center，比 Flexbox 更直接 - 注意：如果子元素设置了
height: 100%却没效果，大概率是父级 grid track 没有显式高度（如grid-template-rows: 1fr）
什么时候该用 display: flex？
当你只关心一个方向上的对齐、分布或弹性伸缩时，display: flex 更轻量、更可控。典型场景是导航栏、按钮组、表单控件、卡片内头像+文字+操作按钮的组合。
-
justify-content控制主轴（水平），align-items控制交叉轴（垂直）——两者配合能轻松实现任意方向的居中 - 项目数量不固定？加
flex-wrap: wrap就能自动换行，flex: 1或flex: 0 1 auto可精细控制伸缩行为 - 慎用嵌套三层以上 Flex：浏览器重排开销明显上升，尤其在动画中；此时应考虑是否该用 Grid 替代外层
- 别指望
order能跨容器调整顺序——它只作用于直接子元素，嵌套结构中的深层元素无法被外部 Flex 容器重排
混合使用时，哪些嵌套方式真正有效？
最稳定、最常用的组合是“Grid 容器 + Flex 项目”，即外层用 Grid 划分宏观区域，每个区域内部用 Flex 排列内容。其他嵌套方式容易踩坑。
立即学习“前端免费学习笔记（深入）”；
- ✅
display: grid容器内，某个div设置display: flex：安全、高效、语义清晰 - ⚠️
display: flex容器内，某个子项设置display: grid：语法合法，但通常没必要——Flex 已能解决该层级的对齐问题，引入 Grid 反而增加复杂度 - ❌ 在响应式断点中用媒体查询来回切换
display: flex↔display: grid：DOM 结构不变，但 layout engine 需要重建整个渲染树，性能不如直接用 Grid 的grid-template-areas重定义 - ⚠️ 同一元素既设
display: grid又依赖align-items居中：Grid 自带justify-items/place-items，混用易冲突
最容易被忽略的兼容性与调试点
不是所有“看起来像网格”的布局都该用 Grid；也不是所有“需要居中”的地方都该上 Flex。真正的难点在于边界判断。
- IE11 不支持
gap在 Grid 中生效，必须回退到margin——但 Flex 的gap在 Safari 14.1 之前也不支持，得统一处理 - 当 Grid 子项内容超长导致容器撑开，优先检查
minmax()是否用了min-content而非minmax(0, 1fr) - Flex 容器里子项设了
width: 100%却溢出？可能是box-sizing默认为content-box，加上box-sizing: border-box再试 - 调试时别只看 computed styles：用浏览器 devtools 的 Layout 面板打开 “Grid” 和 “Flexbox” overlay，能直观看到轨道/轴线是否按预期生成
