auto-fit + minmax(280px, 1fr)是唯一能同时保障最小宽度、自动增减列数且不留空列的写法；auto-fit收缩空轨道使卡片填满整行，auto-fill则预留空列导致右侧留白或错位。
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 是唯一能同时保最小宽度、自动增减列数、不留空列的写法。别被“响应式”三个字绕晕——核心就这一行，其余都是配合项。
为什么必须用 auto-fit 而不是 auto-fill
两者只差一个字母，行为却相反：auto-fill 会预留所有可能列位（哪怕没内容），导致右侧大片空白；auto-fit 才会把空轨道收缩掉，让有内容的卡片拉伸填满整行。
常见错误现象：小屏正常，桌面端卡片间出现诡异空隙，或者最后一行明显左对齐——八成是误用了 auto-fill。
-
auto-fit：有内容才建列，无内容的轨道直接消失 -
auto-fill：先按最小宽度算出最多能塞几列，全建出来，空着也占位 - 实操建议：只要不是刻意做“留白设计”，一律选
auto-fit
minmax(280px, 1fr) 里的数字怎么定
280px 不是玄学，是 iPhone SE（375px 屏宽）减去左右各 40–50px 边距后的安全底线。低于这个值，文字和按钮就难点击；高于它，小屏单列太宽，留白失控。
- 内容极简（如图标+一行字）可下探到
240px - 含图片+多段文字的卡片，建议守住
280px，别贪多列 - 桌面端若需限制最大宽度，别锁容器，改在卡片上加
.card { max-width: 400px; }
卡片高度不一致时错行怎么办
Grid 默认按行分配高度，如果某张卡片内容多、撑高了，下一行卡片就会被顶歪——这不是 bug，是 Grid 的默认行为。
- 加
grid-auto-rows: minmax(min-content, max-content)，让每行高度随内容弹性变化 - 避免给卡片设固定
height或min-height，除非你明确要统高 - 如果必须统高，用
align-items: stretch（默认值），但得接受空白填充
gap 用固定值还是动态值
固定 gap: 1rem 在手机上显得太大，在大屏上又太小。真正适配的写法是 gap: clamp(0.5rem, 2vw, 1rem)。
-
clamp(最小值, 媒体查询等效值, 最大值)是现代 CSS 的自适应利器 -
2vw让间距随视口线性缩放，比媒体查询更平滑 - 注意：IE 不支持
clamp()，如需兼容，退回到gap: 1rem即可，影响有限
width: 100% 或 flex: 0 0 auto 类样式——Grid 已接管布局，这些反而会干扰 minmax() 的计算逻辑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
