grid 适合二维布局，flexbox 适合一维排列；grid 能显式定义行列结构、跨行跨列定位及动态列数推导，flexbox 仅支持单轴对齐与顺序调整，二者边界清晰，应按需选用。
Grid 适合二维布局，Flexbox 适合一维排列
如果你要同时控制行和列的对齐、间距、重排（比如仪表盘、相册网格、响应式表单布局），display: grid 是更直接的选择；而如果只是让一组元素在单行或单列里对齐、等分、自动换行（比如导航栏、卡片列表、按钮组），display: flex 更轻量、语义更清晰。
常见错误现象：flex-wrap: wrap 勉强实现两行三列，但第二行第一项无法和第一行第一项对齐；或者用 flex 搞“圣杯布局”，结果侧边栏高度不随主内容撑开——这不是 Flexbox 的设计目标。
- Flexbox 的主轴（
flex-direction）只有一条，交叉轴是辅助线；Grid 的行轴和列轴是正交且同等重要的 -
grid-template-rows和grid-template-columns能显式定义二维结构，Flexbox 没有对应能力 - Grid 支持
grid-area直接跨行跨列定位，Flexbox 只能靠order改序，不能真正“跳格子”
不要用 Flexbox 模拟 Grid 的 repeat() 和 auto-fit
有人写 display: flex + flex: 1 + min-width 来“模拟”响应式网格，结果在小屏下子项被强行压缩、文字换行错乱，或在大屏下留白失控。这不是 bug，是误用了工具边界。
使用场景：需要“尽可能多放几列，但每列不窄于 250px，剩余空间平均分配”——这是 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)))) 的标准用法，Flexbox 做不到这种动态列数推导。
立即学习“前端免费学习笔记（深入）”；
- Flexbox 的
flex-basis是单个项目的初始尺寸，不参与全局列数计算 - Grid 的
auto-fit/auto-fill是容器级行为，浏览器会真实测量可用空间再分配轨道 - 兼容性注意：
auto-fit在 Safari 14.1+ 才稳定支持，旧版本需降级为固定列数或 JS 补充
Flexbox 的 align-items 和 Grid 的 align-items 不是一回事
两者同名，但作用域完全不同：Flexbox 的 align-items 控制所有子项在交叉轴上的对齐（比如让所有按钮垂直居中）；Grid 的 align-items 控制的是每个网格项在其单元格内的对齐（比如让图片在单元格里右下角显示），不影响单元格本身的位置。
容易踩的坑：给 Grid 容器设了 align-items: center，发现整个网格没居中——因为这是单元格内对齐，不是容器居中。真要居中整个网格，得用外层 Flexbox 或 margin: auto。
- Grid 中控制“网格整体在父容器中居中”，该用父容器的
display: flex+justify-content/align-items - Grid 中控制“某一项跨多行后，在它占据的所有单元格里居中”，才用
justify-self/align-self - Flexbox 没有
justify-self，所有子项对齐方式由容器统一决定
嵌套不是问题，但别为了嵌套而嵌套
实际项目里，90% 的合理布局是 Grid 外层 + Flexbox 内层：用 Grid 划分页眉/侧边栏/主区/页脚，再在主区内用 Flexbox 排按钮组或文章标题+摘要+标签。
性能影响很小，但可维护性差别很大。见过有人把整个页面塞进一层 display: grid，然后每个卡片内部又套一层 grid 去对齐图标和文字——这反而让 CSS 更难读、更难调。
- Flexbox 嵌套两层以内通常很安全；Grid 嵌套超过一层就要警惕是否设计过载
- Grid 的
subgrid（目前仅 Firefox 稳定支持）能真正继承父网格线，但别指望它替代 Flexbox 内部排列 - 调试时优先检查：是容器没设
display？还是子项忘了grid-column？而不是立刻怀疑嵌套层级
Grid 和 Flexbox 的边界其实很干净：一个管“怎么画格子”，一个管“怎么摆东西”。混淆往往发生在想用单一工具解决全部问题的时候——而真实页面从来不是非此即彼，是哪块该用哪个，得看那一块具体要什么行为。
