绝大多数卡片列表场景该用 auto-fit；auto-fill 会预占空白列，auto-fit 则收缩空列并将空间分配给有内容的列，使卡片自然撑满容器。
auto-fill 和 auto-fit 到底该用哪个
绝大多数卡片列表场景该用 auto-fit，不是 auto-fill。两者语法一样，行为却相反：auto-fill 会“预占位”，哪怕后面没卡片，也会留出一列空白；auto-fit 则把空列宽度归零，把省下的空间分给有内容的列，让卡片自然撑满容器。
常见错误现象：grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 在手机上显示两列，但右边一列空着、卡片被压窄、文字折行——这就是 auto-fill 在强行占位。
例外情况：只有当你需要“预留槽位”时才选 auto-fill，比如拖拽式仪表盘、固定格子数的编辑界面，或图片画廊要求每行对齐（哪怕最后一行有空位）。
minmax(280px, 1fr) 不是设固定宽度
minmax(280px, 1fr) 的意思是：单列不能小于 280px，但上限不是“最多 1fr”，而是“在满足所有列 ≥280px 前提下，剩余空间均分”。它不锁定像素值，而是参与动态协商。
容易踩的坑：
- 写成
minmax(280px, 280px)或minmax(280px, 300px)：第二参数不是1fr，弹性就没了，等价于固定宽度 - 最小值设太小（如
150px）：中等屏可能多出一列，导致卡片内容挤得看不清 - 用
em/rem当最小值：字体缩放会意外改变列数，更稳的是clamp(160px, 25vw, 300px)
gap 比 margin 更可靠，但别设太大
gap 是 Grid 原生属性，只作用于网格项之间，不会影响外边距，也不会触发父容器滚动条。而用 margin 给每个卡片加间隔，边缘容易多出半倍间距，还得额外写负边距或选择器修正。
但 gap 设太大（比如 gap: 40px）在窄屏下会吃掉大量可用宽度，导致 Grid 提前减少列数。例如：手机宽度 375px，设 gap: 24px + 两列最小宽 2×280px = 584px，已超限，Grid 只能退为单列——这不是 bug，是计算结果。
建议起步值：gap: 1.25rem（约 20px），再根据实际断点微调。
卡片内部必须放弃固定宽高
Grid 只管外层轨道分配，卡片内部若写死 width: 300px、height: 400px 或 <img style="max-width:90%">，就会卡死弹性逻辑，导致布局错位甚至溢出。
正确做法：
- 卡片自身去掉
width和height，用max-width: 100%防撑破轨道 - 图片统一用
img { width: 100%; height: auto; display: block; } - 如有固定宽高比需求（如封面图），用
aspect-ratio或padding-top技巧兜底 - 文字换行控制慎用
line-clamp，Safari 旧版需-webkit-line-clamp，且截断位置不稳定
最常被忽略的一点：写了 repeat(auto-fit, minmax()) 却在手机上还是两列，问题几乎从不在 Grid 本身——先查 <meta name="viewport"> 是否漏了，再看卡片子元素有没有硬编码宽高或脱离文档流的样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
