grid与flexbox本质不同：grid是二维坐标系，适合同时控制行与列的结构布局；flexbox是一维流水线，专精单行或单列的内容对齐与空间分配，二者应按需求维度选择而非相互替代。
选错布局方案不是写法问题，是维度误判——Grid 和 Flexbox 根本不在同一层面上竞争。
Flexbox 是单轴流水线，不是“能排成行就等于二维”
它只管一条线：要么 flex-direction: row（水平主轴），要么 flex-direction: column（垂直主轴）。即使开了 flex-wrap: wrap，换行后每一行仍是独立的，行与行之间无法强制列对齐。比如三列卡片在小屏下折成两行，第二行只有两个卡片，左边空缺——justify-content: space-between 对第二行无效，你得额外用 :nth-child 或伪元素补位。
- 适合场景：导航栏、按钮组、表单字段对齐、卡片内部内容居中
- 关键动作：分配剩余空间（
flex: 1）、控制顺序（order）、主轴/交叉轴对齐（justify-content/align-items） - 容易踩的坑：
align-items: stretch默认拉伸高度，常导致卡片高度不一致；flex-basis设为auto时受内容宽度影响，可能破坏等分布局
Grid 是坐标系，不是“多个 flex 容器拼起来”
它先画格子：grid-template-columns: 1fr 2fr 1fr 定义列宽，grid-template-rows: 100px auto 定义行高，再把元素按坐标放进去。一个 div 可以跨三行两列（grid-row: 1 / 4; grid-column: 2 / 4），多个元素能叠在同一网格单元（靠 z-index 或层叠上下文控制），这在 Flexbox 里只能靠 position: absolute 模拟，且脱离文档流。
- 适合场景：整页骨架（header/main/sidebar/footer）、仪表盘、图片画廊、复杂表单分组
- 关键动作：定义轨道（
grid-template-areas）、定位项目（grid-area）、响应式重排（repeat(auto-fit, minmax(300px, 1fr)))） - 容易踩的坑：
gap不作用于grid-template-areas定义的命名区域之间；justify-items和align-items控制的是单元格内内容对齐，不是整个网格容器的对齐
别用 Flexbox 做 Grid 的事，也别用 Grid 做 Flexbox 的事
常见错误包括：用 display: grid + grid-template-columns: repeat(3, 1fr) 排导航菜单——浪费 Grid 能力，且无法自然处理菜单项文字长度差异导致的间距不均；反过来，用 display: flex + flex-wrap 实现后台仪表盘卡片网格——当卡片高度不一时，行高由最高卡片决定，下方留白无法自动填平，而 Grid 的 grid-auto-rows: minmax(200px, auto) 能让每行自适应。
- 判断依据很简单：是否需要同时约束行和列的位置？需要 → Grid；只需要控制一行或一列的排列 → Flexbox
- 嵌套合理：Grid 容器内某个区域（比如侧边栏）用 Flexbox 排按钮，没问题；但反过来，在 Flex 容器里硬塞
grid-column属性，完全无效 - 兼容性注意：IE11 支持 Grid 但需加
-ms-前缀，而 Flexbox 在 IE10+ 就可用；若必须支持 IE9，两者都得降级为 float 或 inline-block
真正难的不是语法，是拿到设计稿第一眼就分清：这是要画格子，还是调流水线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
