绝大多数情况下应使用 auto-fit，因其会折叠空轨道使有内容的列自动拉伸填满整行，而 auto-fill 会保留空列导致小屏不占满、横向滚动或大屏留白。
绝大多数情况下该用 auto-fit，除非你明确需要预留空白轨道。 用错会直接导致小屏下卡片不占满、意外横向滚动、或大屏右侧留白——这些都不是媒体查询能修好的问题。
为什么 auto-fit 比 auto-fill 更适合卡片类布局
auto-fit 会把空的网格轨道“折叠”掉，让有内容的列自动拉伸填满整行；auto-fill 则不管有没有子元素，都按最小尺寸尽可能多建列，空列照样占位。
- 手机上只有一张卡？
auto-fit让它独占整行宽度；auto-fill可能硬塞出 3–4 列，其中 2–3 列完全空白，还可能触发水平滚动条 - 卡片数量动态变化（比如 JS 插入/删除）？
auto-fit布局始终紧凑；auto-fill留下的空列会干扰视觉节奏和交互热区 - 父容器宽度受限（比如在
flex容器里没设flex: 1）？auto-fill会因“算不出足够空间”而退化为单列，但行为不可预测；auto-fit至少保证已有内容撑开可用宽度
repeat(auto-fit, minmax(…)) 的参数怎么设才不翻车
核心是 minmax() 里的两个值：最小不能太小（否则小屏挤成一条缝），最大别写死（否则大屏卡在固定列数）。
- 最小值建议 250px–320px：低于 250px 文字难读；高于 320px 可能在中等屏幕（如 iPad 横屏）下只剩 1 列
- 最大值必须用
1fr，不要写300px或2fr：前者让列宽锁死，失去自适应能力；后者破坏均分逻辑，可能造成列宽不一致 - 如果卡片内含图片，务必加
img { width: 100%; height: auto; }：否则图片原始尺寸会撑破网格，导致列宽计算失效
为什么写了 auto-fit 还是只显示一列
这不是 auto-fit 失效，而是它没东西可算——Grid 列数依赖父容器的**可用行内宽度**。
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否被限制为
display: inline-grid或未设宽度（比如在 flex 容器里没写flex: 1或width: 100%） - 检查卡片自身是否写了
width、min-width或max-width：Grid 需要子项“放手”才能控制列宽，显式宽度会阻断这一过程 - 用浏览器开发者工具看
Computed面板里的grid-template-columns值：如果显示为1fr，说明 Grid 认为只能放一列；如果显示为1fr 1fr却只渲染一列，大概率是子项溢出或高度塌陷
真正容易被忽略的是：auto-fit 不是“魔法”，它只管列数与列宽，不管行高。如果卡片高度差异大，记得加 grid-auto-rows: minmax(min-content, auto)，否则矮卡片会让整行塌陷，高卡片被截断。
