一维布局用 Flex，二维布局用 Grid，混合使用最合理：Flex 处理行或列内对齐，Grid 划分行列交叉结构，二者分层协作可提升可维护性与兼容性。
一维对齐用 display: flex，别硬套 Grid
当你只需要让几个元素排成一行（比如导航链接）或一列（比如表单项），display: flex 就是更轻、更稳的选择。它天然适配内容流，justify-content 控制主轴，align-items 控制交叉轴，两行代码就能居中一个按钮或撑满一行间距。
- 常见错误：给
.nav或.form-group加display: grid，只为实现水平对齐——反而要写grid-template-columns: 1fr auto 1fr，还容易在 Safari 老版本里触发gap渲染 bug - Flex 的
flex-wrap: wrap+gap对响应式卡片列表足够好用；Grid 在这种场景下属于“杀鸡用牛刀” - 兼容性更宽：Flex 的
gap在 iOS 14.5+ 就已稳定，而 Grid 的gap在 Safari 14.0 之前有偏移问题
二维结构用 display: grid，别靠 Flex 嵌套硬凑
一旦布局出现明确的行列交叉关系——比如页头+侧边栏+主内容+页脚，或者商品卡片需要固定列宽、自动换行且每行高度一致——display: grid 就是唯一干净解法。
- 常见错误：用多层
display: flex嵌套模拟网格，结果每层都要处理flex-basis、min-width和断点重排，CSS 越来越难维护 - Grid 的
grid-template-areas可视化定义区域，HTML 结构不用为视觉顺序妥协：.layout { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-columns: 240px 1fr; } -
minmax(250px, 1fr)+auto-fit一行搞定响应式卡片列数，无需媒体查询堆砌
混合使用才是常态：Grid 定骨架，Flex 调细节
真实项目里，90% 的合理布局都是组合态——Grid 控制页面级容器划分，Flex 处理每个区块内部的对齐与伸缩。
- 例如仪表盘：
.dashboard用 Grid 划分「图表区」「指标卡区」「侧边筛选栏」；每个「指标卡」内部用 Flex 居中图标+文字+数值 - 再如响应式图库：
.gallery用 Grid 实现等宽列+自动列数；每张图片卡片用 Flex 垂直居中标题和操作按钮 - 避免反模式：在 Grid 容器里给子项又设
display: grid——除非真需要嵌套二维控制，否则大概率是设计分层没想清楚
兼容性兜底和 IE11 现实问题
如果项目仍需支持 IE11，Grid 的部分能力必须降级，但 Flex 依然可用。
立即学习“前端免费学习笔记（深入）”；
-
grid-template-areas、minmax()、auto-fit、gap在 IE11 中完全不支持，得退回媒体查询 + 固定列数方案 - Flex 的
flex-grow/flex-shrink在 IE10+ 支持良好，justify-content: center和align-items: center也基本无坑 - 不是“选谁更好”，而是“谁先扛住”：能用 Flex 满足需求时，就别提前引入 Grid 兼容成本
