响应式列表默认应使用 auto-fit 而非 auto-fill；auto-fit 会塌缩空轨道使有内容列均分空间，auto-fill 则按最小值强行占满所有可能列数，导致空列、压窄、横向滚动等问题。
绝大多数响应式列表该用 auto-fit，不是 auto-fill；否则空列占位、卡片压窄、小屏横向滚动都是它干的。
为什么 auto-fit 才是响应式列表的默认选择
auto-fit 会把没内容的网格轨道直接塌缩掉，让有内容的列均分剩余空间；auto-fill 则按 minmax() 的最小值强行算出所有可能列数，哪怕后面全是空的，也照占不误。
- 小屏下只返回 2 张卡片时：
auto-fit渲染 2 列并拉伸填满容器；auto-fill可能渲染 4 列，右侧留白甚至触发overflow-x: auto - API 动态返回 1–6 项时：
auto-fit的 DOM 结构和视觉完全对齐；auto-fill会悄悄多出 2–3 个“透明占位符”，调试时看到grid-column-end跳变却无渲染，大概率就是它 - 卡片类、新闻流、商品列表、仪表盘指标块——这些数量不确定、需最大化利用空间的场景，
auto-fit是行为上唯一合理的选项
repeat(auto-fit, minmax()) 的写法陷阱
单独写 repeat(auto-fit, 200px) 是无效的，浏览器根本不识别。必须用 minmax() 提供弹性范围，且顺序不能错：
-
minmax(250px, 1fr)最常用：250px 是单列最小可接受宽度，1fr表示“在满足所有列 ≥250px 前提下，剩余空间均分” -
minmax(250px, max-content)容易溢出；minmax(250px, 250px)锁死列宽，auto-fit彻底失效 -
minmax(1fr, 250px)会直接让整条grid-template-columns声明被忽略——最小值不能大于最大值 - 最小值别设太小（如
150px），中等屏可能多出一列，文字挤成两行；也别用em/rem，字体缩放会意外改变列数
子元素不收敛，再好的 grid-template-columns 也没用
写了 minmax(280px, 1fr) 却仍只显示一列？或者列宽远超预期？根因几乎都在子项本身：
- 图片没加
max-width: 100%和height: auto，硬撑破列宽 - 子项用了
display: flex，内部flex: 1触发浏览器默认min-width: auto，得显式加min-width: 0 - 文字块含
white-space: nowrap或未设overflow: hidden，强制轨道拓宽 - 父容器被上层
white-space: nowrap或width未设为100%影响，导致 grid 容器本身宽度异常
兼容性与降级必须手动处理
auto-fit 在 Safari 16.3 及更早版本中，若写成 repeat(auto-fit, 1fr)（没 minmax()）会静默退化为单列；IE 完全不支持。它不报错，只回退，JS 检测毫无意义：
- 用
@supports (display: grid)包裹 Grid 规则，外层加float或inline-block降级布局 - 真要 JS 控制，监听
resize并比对element.clientWidth与预设列宽阈值，比查 CSS 支持更可靠 - 调试时给父容器加
outline: 1px solid red看真实宽度，再用开发者工具检查每列的computed width是否符合预期——别信“看起来满了”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
