auto-fit 是卡片布局的默认选择，因其能收缩空轨道使卡片撑满容器、随宽度换列；auto-fill 则强制预留空列，易致留白、滚动或列数跳变。
用 auto-fit，别用 auto-fill——除非你明确需要预留空列槽位。这是卡片布局最常踩的坑，错用 auto-fill 会导致小屏留白、横向滚动、列数跳变，而 auto-fit 才能让卡片真正“撑满容器、随宽换列”。
为什么 auto-fit 是卡片布局的默认选择
auto-fit 会把没内容的重复轨道直接收缩掉，让有内容的卡片拉伸填满整行；auto-fill 则不管有没有子项，都按最小宽度硬塞满所有可能列，留下隐形空轨道。
- 现象：只有 2 张卡，容器宽 800px、
minmax(250px, 1fr)→auto-fit出 2 列（各 400px），auto-fill出 3 列（前 2 张占位，第 3 列空着，右侧留白 250px） - 后果：空轨道可能触发横向滚动条，或在 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)写成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
图片和文字不配合，Grid 再对也没用
Grid 只管外层格子，卡片内部溢出、拉伸、基线空白都会破坏视觉一致性。
-
<img>必须加width: 100%; height: auto;，否则默认尺寸可能撑破网格；再加display: block;消除基线下方 4px 空白 - 卡片自身别设
height，改用grid-auto-rows: minmax(min-content, auto)或minmax(100px, auto)防塌陷又允内容撑开 - 文字用
word-break: break-word;，避免长单词（如 URL）撑宽卡片；box-sizing: border-box和max-width: 100%也要加上，防止 padding/margin 破坏列宽计算
真正难调的从来不是那几行 CSS，而是 minmax(240px, 1fr) 里的 240px 和容器当前可用宽度之间的隐式博弈——改一个小数值，可能同时影响列数、换行点、图片裁剪比例和文字可读性，得一起看、一起试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
