auto-fit才是正确选择：它会消除空轨道并将空间分配给有内容的列，而auto-fill会保留空轨道导致小屏下卡片被压扁。
直接用 repeat(auto-fit, minmax(280px, 1fr)) 就能搞定绝大多数响应式卡片列表，不需要媒体查询，也不用 JS。
为什么不用 auto-fill？它会让卡片被压扁
很多人抄代码时把 auto-fit 写成 auto-fill，结果小屏下出现极窄列、文字折行、图片变形——因为 auto-fill 会“强行占位”：只要容器宽度 ≥ 单列最小宽（比如 280px），就生成一列，哪怕后面没内容。空轨道保留，剩余空间不拉伸，卡片就被硬塞进窄缝里。
auto-fit 才是你要的：它生成列后，会把没内容的空轨道宽度归零，把省下的空间分给有内容的列，让它们自然撑满容器。
- ✅ 正确：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - ❌ 错误：
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) - ⚠️ 更糟：
repeat(auto-fill, 1fr)—— 没minmax()约束，浏览器根本不知道“一列至少多宽”，行为不可控
移动端单列失效？先查这三处硬伤
写了 repeat(auto-fit, minmax()) 却在手机上还是两列、错位、甚至溢出？问题几乎不在 Grid 本身：
- 忘了加
<meta name="viewport" content="width=device-width, initial-scale=1">，浏览器按桌面视口渲染，Grid 容器宽度算错了 -
gap设太大（比如gap: 40px），窄屏下光间距就吃掉大半宽度，逼得 Grid 提前减少列数 - 卡片子元素有硬编码宽高，比如
<img style="max-width:90%">或width: 300px，直接卡死弹性逻辑；应改用max-width: 100%+height: auto
minmax(280px, 1fr) 不是固定宽度，别当像素值调
这个写法常被误解为“每列就是 280px 宽”，其实它定义的是轨道尺寸范围，最终列宽由容器总宽和所有轨道协商决定：
-
280px是底线：列不会被压缩到比这更小 -
1fr是分配规则：等分“减去所有最小宽和 gap 后的剩余空间” - 真正起效的临界点是：
容器宽 ≥ 列数 × 280px + gap × (列数 − 1)；低于它，列数自动减一 - 所以调小最小值（如改成
minmax(240px, 1fr)）比加媒体查询更轻量，也更连续
高度不一致导致阶梯错位？加 align-items: start
默认 align-items: stretch 会让所有卡片拉伸到同一行最大高度，下一行从这个新高度起始，形成“楼梯状”。这不是 bug，但视觉难看。
解决只需一行：
card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
align-items: start; /* 关键：让每张卡片只占自己内容高度 */
}
如果某张卡片内部文字多、图片高，它自己变高，但不影响同行其他卡片，下一行也从常规基线开始，对齐就干净了。
最易被忽略的一点：Grid 的响应式能力完全依赖父容器宽度是否真实反映视口。如果外层套了 max-width: 1200px 却没配 margin: 0 auto，或者被 Flex 容器用 flex: 1 错误约束，auto-fit 就失去计算依据——参数再准也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
