grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 是首选，因它唯一同时实现列数自适应、单卡最小宽度保障及空列自动收缩；repeat(3, 1fr) 或百分比写法会锁死列数，导致小屏压扁或横向滚动。
为什么 grid-template-columns: repeat(auto-fit, minmax()) 是首选
因为它是唯一能同时解决列数自适应、单卡最小宽度、空列自动收缩这三件事的写法。用 repeat(3, 1fr) 或 25% 25% 25% 25% 都会锁死列数，小屏下卡片被压扁或横向滚动。
实操建议：
- 写成 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，280px 是移动端安全底线（iPhone SE 屏宽 375px，减去左右边距后仍可容纳）
- 不要设 max-width 在容器上，而应在卡片上加 .card { max-width: 400px; }，防止桌面端拉太宽
- 配合 gap: clamp(0.5rem, 2vw, 1rem)，比固定 gap: 1rem 更适配不同视口
- 若卡片高度差异大，必须加 align-items: start，否则默认 stretch 会让短内容卡片被拉高错位
卡片内部怎么保证标题和按钮不跳动
靠 flex 垂直方向撑满 + 底部元素自动贴底，不是靠固定高度或绝对定位。一旦用 height: 200px 或 position: absolute，文字增减就崩。
实操建议：
- 卡片自身设 display: flex; flex-direction: column; height: 100%（注意：父容器需有明确高度，比如 Grid 行高已由内容撑起）
- .card-body { flex-grow: 1; } 让描述区域占满剩余空间
- .card-footer { margin-top: auto; } 把按钮/操作区永远推到底部
- 图片不确定高？用 aspect-ratio: 4/3; object-fit: cover;，不支持时 fallback 为 padding-top: 75% + position: relative + img { position: absolute; }
gap 和 margin 别混用，尤其在 Flex 容器里
Flex 布局中开了 gap 还加 margin，会导致首尾多出空白、间距翻倍；Grid 中同理，但更隐蔽——gap 不作用于容器边缘，margin 却会。
常见错误现象：
- 卡片列表左边/右边多出半格间隙
- 最后一行卡片右侧留白，像没对齐
- 小屏下卡片挤到一起，大屏又太空
实操建议：
- Flex 容器统一用 gap，删掉所有卡片的 margin
- Grid 容器也只用 gap，别给卡片设 margin，否则间隙叠加
- 如果必须兼容 Safari 15.6 及更早版本，gap 失效，那就放弃 Flex/Gap 组合，直接切回 Grid —— 它的 gap 在旧 Safari 里依然可靠，且自带边缘规避
图片塞进卡片时，.card-img-top 不是可选，是强制语义
Bootstrap 的 .card-img-top 不只是加个圆角边框，它参与了卡片内部流式计算。随便套个 <img class="img-fluid">，小屏上图片溢出、和文字间距错乱是必然的。
实操建议：
- 图片必须是 .card 的**直接子元素**，且紧接在 .card 开始标签后
- 必须用 .card-img-top 类，不要用其他类名模拟
- 不要手动设 width 或 height，让它随 .card 宽度自动缩放
- 需要裁剪居中？额外加 object-fit: cover，.card-img-top 本身不处理这个
真正容易被忽略的是：卡片内部的 flex-grow: 1 和外部 Grid 的 minmax() 其实是两套独立的高度控制逻辑，它们不自动联动。如果卡片内容极少，flex-grow 撑不开，minmax() 又没触发换行，视觉上就会“空一块”。这时候得靠 min-height 或内容占位符兜底，而不是指望 layout 自动补全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
