绝大多数卡片布局该用 auto-fit 而非 auto-fill；auto-fill 会强制生成满行轨道导致小屏留白、卡片压窄甚至横向滚动，仅适用于需严格对齐空位的场景如仪表盘或日历。
绝大多数卡片布局不该用 auto-fill，该用 auto-fit；写成 auto-fill 很容易在小屏下留白、压窄卡片、甚至触发横向滚动。
为什么 auto-fill 在卡片场景里大概率翻车
auto-fill 的行为是“按 minmax() 算出最多能放几列，就生成几条轨道”，不管有没有内容——哪怕只有一张卡片，它也会硬生生占满整行，空出右边一列甚至两列。
- 常见错误现象：
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))在手机上显示两列，右边一列空白，卡片被挤到约 150px 宽，文字强制折行 - 这不是 CSS 失效，是
auto-fill正常工作，只是你不需要它 - 只有拖拽仪表盘、固定格子日历、或图片画廊要求“每行严格对齐（含空位）”时，才考虑
auto-fill
minmax() 的两个参数必须写对，否则弹性直接失效
minmax() 不是“最小宽 / 最大宽”，而是“单轨道最小可取值 / 单轨道能拿到的最大份额”。浏览器靠它协商列数和列宽，写错一个，repeat() 就退化为单列或固定列。
- 第一参数必须是固定长度：
px、rem、clamp()；避免用em（字体缩放会意外改变列数） - 第二参数只接受
1fr或max-content；写成2fr、minmax(200px, 300px)或minmax(200px, 1fr) 1fr都无效，浏览器静默忽略 - 最小值别设太小：比如
150px，iPad 竖屏可能多出一列，卡片内容被压缩看不清；建议起步值250px～280px
gap 和卡片内部样式是隐形杀手
gap 是 Grid 原生间隔控制，比 margin 更干净可靠——但它吃宽度。设太大，Grid 会因总宽超限而主动减少列数，这不是 bug，是计算结果。
- 例如：手机宽
375px，gap: 24px+ 两列最小宽2×280px = 584px，已超限 → Grid 只能退为单列 - 建议起步值用
gap: 1.25rem（≈20px），再按实际断点微调 - 卡片内部必须放弃固定宽高：
width: 300px、height: 400px、img { max-width: 90% }这类写法会卡死弹性逻辑 - 正确做法：卡片自身不设
width/height，图片统一用img { width: 100%; height: auto; display: block; }
真正难的不是写出 repeat(auto-fill, minmax())，而是意识到：多数时候你根本不需要 auto-fill，需要的是 auto-fit —— 它折叠空轨道，让有内容的列自然均分宽度。但如果你坚持要用 auto-fill，就得同步接受“留白”或“预留槽位”这个前提，不能一边要它预占位，一边又抱怨卡片被压窄。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
