绝大多数卡片流该用auto-fit，因其收缩空轨道使有内容的列均分剩余空间，避免右侧留白或横向滚动；auto-fill则强行预留所有可能列位，易致空白、错位或滚动条。
绝大多数卡片流该用 auto-fit，不是 auto-fill；写错一个词，小屏下就多出看不见的空白列，还可能触发横向滚动。
为什么 auto-fit 才是卡片流的默认选择
auto-fit 会把没内容的网格轨道直接收缩掉，让有卡片的列均分剩余空间；auto-fill 则按 minmax() 的最小值强行算出所有可能列数，哪怕后面全是空位也占着——这在卡片数量动态、不确定时就是布局隐患。
- API 返回 2 张卡片，
auto-fit渲染 2 列并拉伸填满容器；auto-fill可能渲染 4 列，右侧留白甚至撑出横向滚动条 - 卡片加载延迟或分页时，
auto-fill的“预占位”会让 DOM 和视觉不一致，调试时看到grid-column-end值跳变但无渲染，大概率是它在作祟 - 只有当你需要预留槽位（比如拖拽式仪表盘、JS 动态插入、画廊要求每行对齐）才选
auto-fill
repeat(auto-fit, minmax()) 必须带 minmax()，否则无效
单独写 repeat(auto-fit, 1fr) 或 repeat(auto-fit, 280px) 是无效语法，浏览器直接忽略或静默退化为单列。必须用 minmax() 提供弹性协商区间：
-
minmax(280px, 1fr)最常用：280px 是单卡可接受的最小宽度，1fr表示“在满足所有列 ≥280px 前提下，剩余空间均分”，不是“填满剩余” -
minmax(280px, 280px)或minmax(280px, 300px)锁死列宽，auto-fit彻底失效，等价于固定列数 -
minmax(280px, max-content)容易溢出，尤其含长单词或未约束图片时
卡片内部不收敛，再好的 grid-template-columns 也没用
写了 minmax(280px, 1fr) 却还是只显示一列？问题几乎都在子项上：
- 图片没设
img { width: 100%; height: auto; }，硬撑破列宽 - 卡片用了
display: flex，内部flex: 1触发浏览器默认min-width: auto，得显式加min-width: 0 - 文字块含
white-space: nowrap或未设overflow: hidden，强制轨道拓宽 - 父容器是
inline-grid或未设width，Grid 宽度由内容撑开，缩放基础就没了
gap 比 margin 更可靠，但别设太大
gap 是 Grid 原生属性，只作用于网格项之间，不会影响外边距，也不会触发父容器滚动条。而用 margin 加间隔，边缘容易多出半倍间距，还得额外写负边距修正。
- 起步值建议
gap: 1.25rem（约 20px），窄屏下更稳 -
gap: 40px在手机宽度 375px 下，加上两列最小宽 2×280px = 584px，已超限，Grid 只能退为单列——这不是 bug，是计算结果 - 若需响应式 gap，优先用
clamp(0.75rem, 2vw, 1.5rem)，比一堆@media更轻量
真正难的不是写对那行 repeat(auto-fit, minmax())，而是确保卡片容器不设 width、图片不撑破、文字不溢出、父容器有明确可用宽度——这些细节漏掉任何一环，“弹性”就只是看着像而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
