grid是二维布局唯一合理选择，flex适用于单行/列对齐分布；grid需用grid-template-areas等定位元素行列位置，flex用justify-content/align-items处理主轴交叉轴对齐，二者应分层使用避免嵌套过深。
别纠结“选哪个”，先看你要解决的是不是二维定位问题——如果是，display: grid 是唯一合理选择；如果只是单行/单列内对齐、分布、顺序调整，display: flex 更轻量、更直接。
什么时候必须用 grid-template-areas 或 grid-column/grid-row
当你需要让元素明确落在“第2行第3列”、跨两行又占半列、或和其它元素形成语义区域关联（比如 "header header" "sidebar main" "footer footer"），就必须用 Grid。Flexbox 没有行列坐标系，硬凑只会套多层 wrapper、加 margin、设 width，最后还容易错行。
- 典型翻车点：用 Flex 实现“侧边栏固定宽 + 主内容自适应 + 页脚粘底”，结果要手动处理
min-height、overflow、vh计算偏差，而grid-template-rows: auto 1fr auto一行就稳 -
grid-template-areas在 Safari 16.4+ 才支持命名区域自动换行，旧版得显式写grid-area: sidebar - 移动端想自动适配列数？
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))比写一堆@media干净得多
什么时候优先用 justify-content + align-items（Flexbox）
当你面对的是「一行或一列内元素的对齐、间距、顺序调整」，比如按钮组水平居中、表单项标签+输入框左对齐、卡片内头像+文字垂直居中——Flexbox 是更直接的选择。它不关心其他行/列是否存在，只专注当前主轴和交叉轴。
- 常见错误：
justify-content: center在 Grid 容器里没效果？因为 Grid 默认不启用主轴对齐逻辑，得用place-items或单独设justify-items/align-items -
flex-direction: row时，justify-content控制水平，align-items控制垂直；换成column则角色互换 -
height: 100%在 Flex 子项里常失效——父容器没显式高度，继承就断了；改用min-height: 0或明确设height
混用时最容易踩的坑
Grid 划外层区域，Flex 处理内部对齐，这是分层职责，不是妥协。但边界模糊时容易出问题：
- 在 Grid 容器里给子项又设
display: flex是合理操作；但若子项内部再套一层display: grid，大概率是层级职责没分清 - Grid 容器内设
justify-content是无效的——它只响应justify-items或justify-self；同理，Flex 子项设grid-column，浏览器直接忽略 - Flex 嵌套超过 3 层（比如
.grid → .row → .col → .card-content），视觉逻辑已超一维范畴，调试困难、重排开销上升，此时该抽离为独立 Grid 区域
真正容易被忽略的不是“选哪个”，而是容器尺寸约束和溢出行为——无显式高度时，Flex 子项的 height: 100% 失效，Grid 的 minmax() 在滚动中可能触发频繁重算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
