绝大多数卡片类响应式网格应使用 auto-fit 而非 auto-fill；auto-fit 折叠空轨道使有内容列均分宽度，auto-fill 则强制生成最多可能列数导致小屏留白或挤压卡片。
绝大多数卡片类响应式网格该用 auto-fit，不是 auto-fill；写反了，小屏下会留白、压窄卡片、甚至触发横向滚动。
为什么 auto-fit 比 auto-fill 更适合卡片布局
auto-fit 会把空轨道直接“折叠”，让有内容的列均分整行宽度；auto-fill 则不管有没有子项，都按 minmax() 算出最大可能列数，硬生生占满容器——哪怕后面三列全是空的。
常见错误现象：grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 在手机上显示两列，右边一列空白、卡片被挤窄、文字折行。这不是 CSS 失效，是 auto-fill 正常工作，只是你不需要它。
- 内容只有 2 张卡片、容器宽 760px、
minmax(280px, 1fr)→auto-fit生成 2 列，各占1fr（即 380px） - 同样条件 →
auto-fill算出最多可放 2 列（760 ÷ 280 ≈ 2.7），但实际仍生成 2 个轨道；若容器宽 840px，它就会生成 3 个轨道，第 3 个为空，右侧多出约 280px 空白 - 只有拖拽仪表盘、固定格子日历、或图片画廊要求“每行严格对齐”时，才选
auto-fill
minmax() 两个参数怎么设才不翻车
minmax() 不是“最小宽 / 最大宽”，而是“轨道最小可取值 / 单个轨道能拿到的最大份额”。浏览器据此协商列数和列宽，写错一个，弹性就崩了。
- 第一参数必须是固定长度：
px、rem、%（不推荐）、clamp()；避免用em（字体缩放会意外改变列数） - 第二参数只接受
1fr或max-content；写成2fr、minmax(200px, 300px)或minmax(200px, 1fr) 1fr都无效，浏览器静默忽略，退化为单列或固定列 - 最小值别设太小：比如
150px，中等屏（如 iPad 竖屏）可能多出一列，卡片内容被压缩看不清；起步建议250px～280px - 更稳的写法是
clamp(160px, 25vw, 300px)，兼顾小屏最小可读性、中屏弹性、大屏上限
gap 和卡片内部样式容易被忽略的坑
gap 是 Grid 原生间隔控制，比给每个卡片加 margin 更干净可靠——它只作用于网格项之间，不影响外边距，也不会触发父容器滚动条。
- 但
gap设太大（比如gap: 40px）在窄屏下会吃掉大量可用宽度，导致 Grid 提前减少列数。例如：手机宽 375px，gap: 24px+ 两列最小宽2×280px = 584px，已超限，Grid 只能退为单列 - 建议起步值用
gap: 1.25rem（≈20px），再按实际断点微调 - 卡片内部必须放弃固定宽高：
width: 300px、height: 400px、img { max-width: 90% }这类写法会卡死弹性逻辑，导致溢出或错位 - 务必加
min-width: 0到卡片元素上（尤其含文本或图片的），防止其默认最小宽度撑破网格轨道
真正难的不是写出那行 repeat(auto-fit, minmax(...))，而是理解 auto-fit 折叠空轨道的时机、minmax() 的协商机制、以及 gap 和子项约束如何共同影响最终渲染——这些细节不调，光靠复制代码，换台设备就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
