Grid适用于二维布局（如页面骨架、仪表盘），Flex适用于一维排列（如导航栏、卡片流）；二者应职责分离，外层用Grid分区，内层用Flex对齐，避免滥用导致性能下降。
需要同时控制行和列时，必须用 display: grid
比如页面骨架（页头/侧边栏/主内容/页脚）、仪表盘里图表与指标卡的行列对齐、或某区块要跨两行又占半列——这些场景下，flex 无法用单个属性实现定位。你写 grid-column: 2 / span 1; grid-row: 1 / span 2 就能一行定位；而 flex 得靠嵌套 + width + margin 硬凑，逻辑断裂且难维护。
常见翻车点：justify-content 在 grid 容器里无效——它只响应 justify-items 或 justify-self；同理，给 flex 子项设 grid-column，浏览器直接忽略。
- 响应式列数用
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，不用写一堆@media断点 - 侧边栏从固定宽过渡为可折叠抽屉，用
grid-template-columns: 0fr 1fr+transition更可控 -
grid-template-areas配合媒体查询切换布局，HTML 不动，语义清晰
只处理线性排列时，优先用 display: flex
导航栏菜单、表单控件左右配对、卡片内标题+图片+按钮垂直堆叠——这类“一维”问题，flex 两行就搞定：justify-content: center + align-items: center 居中任意元素；flex-wrap: wrap + gap 撑起响应式卡片流，子项增减不影响结构。
容易踩坑：height: 100% 在 flex 子项里常失效——父容器没显式高度，继承就断了；改用 min-height: 0 或明确设 height。
立即学习“前端免费学习笔记（深入）”；
- 子项高度不一致但要等高？默认
align-items: stretch就生效，无需 hack - 移动端折叠侧边栏？直接对某项设
display: none，其余项自动撑满 -
flex-basis设为0才能让flex-grow真正按比例分配，设成auto或具体值会干扰计算
二者混用不是折中，而是职责分离
真实项目里，grid 常作外层容器划分区域，每个区域内再用 flex 处理细节对齐。比如仪表盘用 grid 划出「筛选区」「图表区」「数据卡区」，而每张数据卡内部用 flex 居中图标+文字+数值。
反模式：在 grid 容器里给子项又设 display: grid——除非真需要二级网格控制，否则大概率是层级职责没分清。
- grid 容器内设
display: flex是合理操作；但 flex 嵌套超过 3 层时，视觉逻辑已超一维范畴，重排开销明显上升 - IE11 兜底仍是现实：如果需支持 IE11，
grid-template-areas、gap、auto-fit都得降级，但flex的核心能力仍可用 - iOS 9 Safari 对
grid-gap有偏移 bug，但flex-gap在 iOS 14.5+ 已稳定
真正容易被忽略的不是“选哪个”，而是尺寸约束和溢出行为
无显式高度时，flex 子项的 height: 100% 失效；grid 的 minmax() 在滚动中可能触发频繁重算——尤其当配合复杂 calc() 表达式时。
性能提示：Flex 嵌套过深、Grid 的自动填充策略滥用，都会让渲染变慢。别为了“看起来高级”硬套二维模型去解决一维问题，旧版 Safari 对 gap 的重绘 bug 就是现成教训。
