该用 display: grid 而不是 flex 的核心判断标准是布局维度：grid 适用于需同时控制行与列的二维布局（如仪表盘、卡片网格），flex 仅适合单行或单列的一维布局（如导航栏、按钮组）。
什么时候该用 display: grid 而不是 display: flex
核心判断标准是：布局维度。如果要同时控制**行和列的对齐、间距、尺寸关系**（比如仪表盘、响应式卡片网格、表单布局），grid 是更自然的选择；而 flex 本质是一维布局模型，适合处理**单行或单列内的元素排列与分配空间**（如导航栏、按钮组、居中一个盒子）。
常见误用场景：flex 嵌套多层来模拟网格（比如 flex 容器里再套 flex 行），代码冗长且难以响应式断点调整；此时直接上 grid 更清晰。
-
grid的grid-template-columns和grid-template-rows能显式定义二维轨道，flex没有对应能力 -
grid支持grid-area直接跨行跨列定位子项，flex子项无法“跳格” - 若只需让子元素水平居中 + 自动等宽，
flex一行justify-content: center; flex: 1就够了，不必动用grid
justify-content 在 flex 和 grid 中行为不同
同名属性，作用对象不同：在 flex 中它控制**主轴上所有子项的整体对齐方式**（比如 space-between 把首尾推到两端）；而在 grid 中，它只影响**轨道（track）内剩余空白的分配**，前提是子项没占满整行（即没用 grid-column: 1 / -1 这类通栏写法）。
容易踩的坑：grid 容器设了 justify-content: center，但子项宽度固定且未声明跨列，结果发现根本没居中——因为 grid 默认按轨道划分空间，子项只是“落在轨道里”，不自动拉伸或重排。
立即学习“前端免费学习笔记（深入）”；
- 想让
grid子项水平居中？优先考虑justify-self: center（作用于子项自身）或给子项加justify-items: center（作用于容器，影响所有子项） -
flex的justify-content对单个子项无效（除非是唯一子项），而grid的justify-self可以单独控制每个子项 - 注意兼容性：
justify-self在旧版 safari（-webkit- 前缀
响应式重排时，grid-template-areas 比 flex-wrap 更可控
当需要在小屏把「头图+正文+侧边栏」变成「头图→正文→侧边栏」垂直堆叠，在大屏变成「头图横跨两行、正文左、侧边栏右」，grid-template-areas 配合媒体查询能用几行代码搞定；而用 flex 实现类似效果，往往得靠 order + 多层嵌套 + flex-basis 微调，逻辑易错且难维护。
示例关键片段：
.layout { display: grid; grid-template-areas: "header header" "main aside"; } @media (max-width: 768px) { .layout { grid-template-areas: "header" "main" "aside"; } }-
grid-template-areas名称必须用引号包裹，每对引号代表一行，空格分隔列 - 名称重复表示跨列（如
"header header"），点（"."）表示空单元格 -
flex-wrap: wrap虽能折行，但无法指定某子项“必须出现在第二行第一列”，只能靠顺序和flex-basis推算位置
性能与渲染时机差异：grid 初始化开销略高，但重排更稳定
grid 在首次计算布局时需解析全部轨道定义和子项位置，比 flex 多一步二维映射，因此大量动态生成的网格（如上千项列表）初渲染稍慢；但一旦定义好，后续子项增删或尺寸变化引发的重排（reflow）范围更小、更可预测——因为位置由轨道决定，而非依赖兄弟节点尺寸。
相反，flex 的 flex-grow/flex-shrink 会触发多次尺寸协商（尤其是混用 min-width、max-width 时），在复杂嵌套下容易出现意外收缩或溢出。
- 列表类场景（如商品瀑布流）优先选
grid+auto-fill/auto-fit，避免flex-wrap因内容高度不一导致的对齐断裂 - 动画频繁的元素（如滑动菜单）用
flex更轻量，grid的grid-column动画不被硬件加速，慎用 - IE11 已不支持现代
grid（仅支持旧语法），如需兼容，flex是更稳妥的一维降级方案
实际项目里最常被忽略的，是混淆「容器定义」和「子项定位」的职责边界——比如在 grid 容器里还写 margin: auto 居中，或者给 flex 子项设 align-self 却忘了父容器没设 align-items。这类问题不报错，但效果永远不对。