绝大多数卡片类布局该用 auto-fit，不是 auto-fill；auto-fit 收缩无内容轨道使卡片拉伸填满整行，auto-fill 则硬塞满所有可能列导致右侧留白、横向滚动或列数跳变。
绝大多数卡片类布局该用 auto-fit，不是 auto-fill——错选会直接导致右侧留白、横向滚动、列数跳变。
为什么 auto-fit 才是卡片布局的默认选择
auto-fit 会把没内容的重复轨道直接收缩掉，让有内容的卡片拉伸填满整行；auto-fill 则不管有没有子项，都按 minmax() 的最小宽度硬塞满所有可能列，留下隐形空轨道。
- 现象：容器宽 800px、
minmax(250px, 1fr)，只有 2 张卡 →auto-fit出 2 列（各约 400px），auto-fill出 3 列（前 2 张占位，第 3 列空着，右侧留白约 250px） - 后果：空轨道可能触发横向滚动条，或在
display: flex容器中导致父元素宽度计算异常 - 适用场景：
auto-fit对应“内容驱动型布局”，比如商品列表、图库、文章卡片；auto-fill只适合拖拽面板、日历格、JS 动态插入前需预占位的场合
minmax() 里两个参数到底怎么设才不翻车
minmax() 不是“最小/最大宽度”，而是“轨道最小可取值 / 单个轨道能拿到的最大份额”。写错一个，整个响应逻辑就失效。
- 第一参数必须是
<length></length>（如240px），不能是auto、em或百分比（字体缩放或父容器padding会干扰列数计算） - 第二参数只接受
1fr，写成2fr、minmax(240px, auto)或minmax(240px, 300px)都会让浏览器静默忽略弹性行为，退化为固定列 - 典型错误：
minmax(240px, 1fr)看似一样，但若前面漏了空格或括号不匹配，CSS 解析失败，整条规则被丢弃
设置了 auto-fit 还是只显示一列？先查这三处
不是 Grid 不工作，而是它“算不出第二列”——可用行内宽度不足，或卡片自身阻断了收缩。
- 父容器没显式宽度：比如在
display: flex的容器里，子元素没设flex: 1或width: 100%，Grid 就拿不到计算依据 - 卡片写了
width: 100%、min-width: 300px或max-width，强制拒绝收缩，Grid 只好放弃加列 - 开发者工具里看
computed styles下的grid-template-columns值，如果显示为1fr而非实际列数（如1fr 1fr），说明minmax没生效或容器宽度为 0
gap 会偷偷改掉列数，很多人根本没意识到
gap 被计入容器总宽，但 minmax() 的最小值只管单列宽度。如果没预留 gap 空间，可能意外少一列。
- 例：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))); gap: 1rem;，在 920px 宽容器中本可塞下 3 列（3×300 = 900），但加上 2 个gap（共 ≈32px）后，实际可用宽度只剩约 888px，导致 Grid 回退到 2 列 - 解决办法是把
gap算进minmax下限：minmax(calc(300px + 1rem), 1fr)，或更稳妥地用max-content替代固定像素下限
真正难的不是写对那两行 CSS，而是理解 auto-fit 和 auto-fill 背后对“空轨道”的不同处理逻辑——这个差异在开发时看不见，上线后却会突然在小屏上冒出来，而且很难复现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
