二维布局必须用Grid，一维排列优先用Flex；Grid支持行列同时控制、跨行跨列、区域命名等二维能力，Flex仅适用于单行或单列的线性布局。
直接看布局维度：二维结构（行列都需要精确控制）必须用 grid，一维排列（只排一行或一列）优先用 flex。硬用 flex 做二维布局，后期改版、适配、调试成本会指数级上升。
判断是否属于二维布局场景
如果需求里出现以下任意一种描述，grid 就不是“可选”，而是“唯一合理解”：
- “第2行第3列放搜索框”“跨两行三列”“侧边栏固定宽、主内容自适应、页脚粘底”
- 需要
grid-template-areas描述语义区域，比如"header header" "sidebar main" "footer footer" - 错误提示要横跨整行、按钮要撑满容器宽度、多列表单在移动端需自动转单列
- 布局中存在单元格合并、行列对齐强依赖、响应式下需重排轨道而非仅换向
这些都不是 flex 能自然表达的——它没有行列坐标系，强行模拟只能靠多层 wrapper + margin + width + position，代码脆弱且不可维护。
justify-content 在 Grid 容器里没效果？
这是最常被忽略的静默失效点：Grid 容器默认不响应 justify-content，它只作用于 Flex 容器的主轴。你在 Grid 里写这个属性，浏览器不会报错，但也不会生效。
立即学习“前端免费学习笔记（深入）”；
- 想让所有网格项水平居中？用
justify-items: center（影响所有子项）或justify-self: center（单个子项） - 想整体居中整个网格？得靠外层容器控制，比如给父元素设
text-align: center或再包一层flex - Flex 子项里写
grid-column？浏览器直接忽略，连 warning 都没有
属性写错层级是调试中最耗时间的问题，不是逻辑错，是根本没走那条路径。
混用时的分层边界在哪
真实项目里 grid 和 flex 不是二选一，而是分层协作：
-
grid用于页面骨架：定义header/sidebar/main/footer的二维区域 -
flex用于组件内部：卡片里的头像+文字垂直居中、表单项的 label+input 左右对齐、导航栏按钮等距分布 - Grid 容器内的某个
GridItem再设display: flex是合理操作；但若它内部又套一层display: grid，大概率说明职责没分清
真正容易被忽略的不是“该用哪个”，而是容器尺寸约束：如果父容器没设 min-height 或显式高度，flex 子项的 height: 100% 会断掉，grid 的 minmax(40px, auto) 在滚动中也可能触发意外收缩。
