优先选 grid，因其天然支持等高行、自适应列数、统一间距及跨行定位；仅当卡片极少、高度一致、无需响应式变化且需复杂内联对齐时才用 flexbox。
卡片布局该用 display: flex 还是 display: grid？
优先选 grid，除非你明确只需要单行或单列排列、且卡片高度不一致、内容动态不可控。Flexbox 在卡片布局中常被误用——它天生不处理“对齐行高”和“跨设备结构重排”，而这两点恰恰是卡片列表最常踩的坑。
Flexbox 做卡片时最常遇到的 3 个对齐问题
Flexbox 的 align-items: stretch 默认拉伸子项高度，但一旦某张卡片内容多出几行，整行卡片就不再等高；更麻烦的是，flex-wrap 换行后，不同行之间无法垂直对齐（比如第二行第一张卡比第三行第一张卡高，视觉错位）。
-
align-items对多行无效：只有align-content控制行间对齐，但它在单行时不生效，容易误以为“设置了却没反应” - 卡片内文字换行导致高度突变，
flex-basis又不能按内容比例自动归一，结果就是参差不齐 - 响应式断点切换列数时，得靠
media query + flex-direction或嵌套容器，DOM 层级变深、维护成本陡增
Grid 实现卡片布局的 4 个关键写法
Grid 天然解决 Flexbox 的短板：行高统一靠 grid-auto-rows，列数控制靠 repeat(auto-fit, minmax())，间距用 gap 而非 margin，还能用 grid-template-areas 预留广告位或空缺卡位。
- 基础结构：
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))—— 自适应列数，最小卡片宽 280px，超出则均分剩余空间 - 等高保障：
grid-auto-rows: 1fr或固定值如250px，避免内容差异导致错位 - 间距统一：
gap: 1rem，它不触发 margin 合并，也不影响盒模型计算 - 特殊卡片定位：用
grid-column: 1 / -1让某张卡横跨整行，无需额外 wrapper
什么时候仍该坚持用 Flexbox 做卡片？
仅当满足全部以下条件：卡片数量极少（≤ 4）、高度完全一致、不需响应式列数变化、且卡片内部需要复杂内联对齐（比如图标+文字+徽标横向流式排布）。
- 典型场景：
nav内的快捷入口卡片、仪表盘顶部的状态小卡片条、表单底部的操作按钮组 - 注意：
flex-wrap: wrap必须配合width控制单卡宽度，否则可能因内容撑开导致列数失控 - 若后续要加“加载更多”或异步插入新卡片，Grid 的
grid-template-rows: masonry（实验性）或 JS 配合grid-auto-flow: dense更可控
真正难的不是语法，而是判断「结构是否稳定」：Grid 要求你承认“这个区域的骨架是二维的”，Flexbox 则默认“我只管这一条线”。卡片一旦涉及多行对齐、列数切换、跨设备重构，就已超出一维模型的表达边界——这时候硬套 Flexbox，只会把 layout 问题拖进 JavaScript 补丁里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
