该用 display: flex 而不是 display: grid 的情况是一维布局，如导航栏、按钮组、表单项对齐；需动态拉伸收缩子项；子元素数量不固定；依赖 align-items/justify-content 居中且父容器尺寸不确定。
什么时候该用 display: flex 而不是 display: grid
一维布局问题，比如导航栏、按钮组、表单项对齐，flex 更直接。它天生只管主轴+交叉轴一条线上的排列，计算逻辑简单，浏览器渲染开销小。
- 需要动态拉伸/收缩某几个子项（比如中间内容占满剩余空间，两边固定）→ 用
flex: 1比写grid-template-columns直观得多 - 子元素数量不固定（如用户动态添加的标签页）→
flex-wrap自动换行比grid-auto-flow更易预测行为 - 要和
align-items/justify-content配合做居中，且父容器尺寸不确定 →flex在小容器里容错性更好，不会像grid那样因隐式轨道导致意外空白
什么场景非得上 display: grid
当你需要同时控制行列关系，或者多个元素之间存在跨区域、对齐锚点、响应式重排等二维约束时，grid 是唯一合理选择。
- 仪表盘卡片布局：左上标题、右上操作按钮、中间数据区跨两行、底部状态栏固定高度 → 必须用
grid-template-areas或命名线来定义位置 - 表单字段与标签错位对齐（比如标签右对齐、输入框左对齐、错误提示在下方）→
grid可以让三者共用同一列轨道，flex得靠嵌套或负 margin 补救 - 响应式断点频繁切换布局结构（比如移动端单列、平板双列、桌面三列带侧边栏）→ 改
grid-template-columns比改多层flex-direction+flex-wrap更干净
grid 布局里最容易踩的坑：隐式网格线和自动轨道
很多人写了 grid-column: 2 / 4 却发现元素没出现在预期位置，其实是父容器没定义足够多的显式列轨道，浏览器自动生成了隐式轨道，但它们默认大小是 auto，可能塌成一条线。
- 避免依赖隐式网格：显式声明
grid-template-columns: repeat(12, 1fr)或至少grid-template-columns: 1fr 1fr，再用grid-column定位 -
grid-auto-rows不设值时，默认为auto，遇到图片或长文本容易撑高整行 → 建议设成minmax(0, max-content)或具体像素值 - 用
grid-area引用未定义的命名区域会静默失败，不报错也不渲染 → 先检查grid-template-areas是否拼写一致
性能差异真实存在吗？看怎么用
单纯开启 grid 或 flex 几乎没性能差别，瓶颈出在复杂计算上：比如上千个 grid-item 同时参与 grid-auto-flow: dense 排布，或 flex 容器内有大量 flex-grow 冲突。
立即学习“前端免费学习笔记（深入）”；
- 列表类无限滚动场景，别用
grid做整体容器 → 每次新增 item 都可能触发全量重排；改用flex+flex-direction: column更稳 -
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))看似聪明，但在窗口 resize 频繁时会反复计算轨道数 → 加throttle或改用 css@container更可控 - 动画属性尽量避开
grid-column/flex-basis，优先用transform和opacity→ 这俩不触发布局重排
事情说清了就结束。真正难的不是选 grid 还是 flex，而是想清楚你到底在约束「位置关系」还是「流动顺序」——前者是二维问题，后者是一维问题。