使用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 实现自适应卡片列数，配合 gap 控制间距、clamp 调整字体、aspect-ratio 保图型，并在 320px/480px 等极端尺寸用媒体查询兜底微调。
小屏下CSS卡片布局错乱、挤成一列或溢出，核心是固定列数没适配视口。用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 配合合理媒体查询，能真正实现“屏幕越小，列越少”，且不依赖JavaScript。
auto-fit + minmax 是响应式网格的基石
它让浏览器自动计算最多能放几列，并确保每列宽度不低于设定最小值（如280px），超出部分均分剩余空间：
- auto-fit：收缩空轨道，让内容填满整行；换成 auto-fill 会保留空列，通常不用
- minmax(280px, 1fr)：单列最小280px（保障文字可读、图片不压缩），最大占1份自由空间
- 搭配
grid-gap（推荐使用 gap，更简洁）控制间距，避免小屏间隙过大
媒体查询不是替代，而是兜底与微调
auto-fit 在绝大多数情况已够用，但某些极端尺寸（如iPhone SE竖屏、折叠屏半开）仍需手动干预：
- 在
320px宽度下强制设为repeat(1, 1fr)，避免卡片被压扁 - 当卡片含固定高元素（如16:9封面图），可在
480px下加grid-auto-rows: minmax(200px, auto)防止高度塌陷 - 慎用
max-width包裹容器——它可能限制 grid 自适应能力，优先用width: 100%+ 内边距控制
别忽略卡片自身响应性
网格再聪明，卡片内部若写死宽高或字体，小屏照样难看：
立即学习“前端免费学习笔记（深入）”；
- 图片用
width: 100%; height: auto;或aspect-ratio: 16/9;保形 - 标题字号用
clamp(1rem, 4vw, 1.25rem)，兼顾可读性与缩放弹性 - 按钮、标签等交互元素留足点击热区，
min-height: 44px是iOS安全底线
基本上就这些。auto-fit 不是银弹，但它把“写多少个断点”变成“定义最小可用宽度”，配合少量精准媒体查询，小屏卡片就能既整齐又自然。
