css grid 是复杂响应式布局的首选，因其原生支持语义化区域重排、跨行跨列定位与二维约束；flexbox 需嵌套、hack 或 js 补位，易导致 dom 和 css 失控。
CSS Grid 是复杂响应式布局的首选，因为它从设计上就支持语义化区域重排、跨行跨列定位和二维空间约束，而 Flexbox 在这类场景下必须靠嵌套、hack 或 JS 补位才能勉强模拟。
Grid 支持 grid-template-areas 语义化重排，Flexbox 做不到
当桌面端是 "header sidebar main aside footer"，平板变成 "header main footer"，手机端压缩为垂直堆叠时，只需在媒体查询里改一行：grid-template-areas: "header" "main" "footer";。Flexbox 没有“区域”概念，只能靠 order 调序 + display: none 显隐 + 多层 wrapper 包裹，DOM 和 CSS 都迅速失控。
常见错误现象：
- 用
flex-direction: column+order模拟区域切换，但侧边栏在小屏下仍占空间（未设width: 0或flex-basis: 0） - 依赖 JS 动态增删 class 控制显隐，resize 时触发多次重排
grid-column 和 grid-row 可直接跨轨道，Flexbox 需要 wrapper 嵌套
某卡片需横跨两列又占三行？Grid 一行 grid-column: 1 / span 2; grid-row: 2 / span 3; 就定位完成。Flexbox 没有行列坐标系，只能额外加一层 div 包住它，再设 display: flex; flex-direction: column，然后对子项再设 flex: 1 —— 这种嵌套超过两层后，视觉逻辑和维护成本就远超必要。
实操建议：
- 避免在 Grid 容器内用
display: flex解决对齐问题；先查justify-items、place-self是否能覆盖 - 跨行跨列的项目不要设
height或min-height，否则可能破坏grid-auto-rows的自动计算
Grid 渲染性能在复杂布局中更稳，尤其涉及频繁 resize 或动画
Chrome DevTools Performance 测试显示：100 个元素的仪表盘布局，Grid 首次渲染比 Flexbox 快 14ms，重排触发频率更低，动画 FPS 高出约 11 帧。这不是玄学——Grid 的二维轨道计算是一次性声明式定义，浏览器可提前规划空间；而 Flexbox 的一维流式布局在嵌套多层后，每次尺寸变化都可能触发交叉轴重新测量。
容易被忽略的关键点：
-
gap在 Grid 中原生支持且无兼容性陷阱；Flexbox 的gap直到 Safari 14.1 才稳定，旧版需用margin模拟，易引发塌陷 - Grid 的
minmax(120px, auto)+auto-fit组合能自动收缩空轨道，Flexbox 的flex-wrap在高度不均时容易错行（比如第二栏第一项被挤到第三行） - IE11 不支持现代 Grid（仅
display: -ms-grid），但如果你的项目已放弃 IE，这个“兼容性优势”根本不存在
真正卡顿的从来不是 Grid 本身，而是忘了给容器加 min-height: 0 导致子项撑破父容器，或是没节流 resize 监听器——这些和选 Flex 还是 Grid 无关，但常被误归因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
