grid 用于二维布局，flex 用于一维对齐；实际项目中应组合使用：grid 定骨架，flex 调细节，避免混用或强行替代。
没有“哪个更好用”，只有“哪个更对路”。Grid 和 Flex 解决的是不同维度的问题，强行比较优劣等于拿螺丝刀去拧螺母——不是工具不行，是用错了地方。
一维对齐就用 display: flex，别硬套 Grid
当你只需要让元素排成一行（比如导航链接）或一列（比如表单字段），display: flex 就是轻量、稳定、直觉的解法。它天然适配内容流，justify-content 控制主轴，align-items 控制交叉轴，两行 CSS 就能居中一个按钮或撑满间距。
- 常见错误：给
.nav加display: grid只为实现水平对齐，结果要写grid-template-columns: 1fr auto 1fr，还可能在 Safari 老版本触发gap渲染 bug -
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-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 兜底时，flex 是最后防线
如果项目仍需支持 IE11，Grid 的部分能力必须降级，但 Flex 依然可用。
-
grid-template-areas、minmax()、auto-fit、gap在 IE11 中完全不支持，得退回媒体查询 + 固定列数方案 -
flex-grow/flex-shrink在 IE10+ 支持良好，justify-content: center和align-items: center也基本无坑 - 真正容易被忽略的是：Grid 的二维控制能力在降级后无法被 Flex “模拟”出来，只能接受结构简化，而不是样式微调
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
