该用 auto-fit——它合并空轨道使剩余项拉伸占满，配合 minmax() 实现列数随容器缩放自动增减；auto-fill 则保留所有轨道（含空轨道），90% 响应式场景推荐 auto-fit。
auto-fit 和 auto-fill 到底该选哪个？
关键看容器里要不要“撑满”空列。auto-fit 会合并空的轨道（即删掉没内容的列/行），让剩余项自动拉伸占满；auto-fill 则保留所有生成的轨道，哪怕没内容，只是它们宽度为 0（或由 minmax() 下限兜底）。实际响应式布局中，90% 的情况该用 auto-fit —— 它配合 minmax(250px, 1fr) 才能真正实现“列数随容器缩放自动增减”。
写法必须带 minmax()，不能只写 auto-fit
grid-template-columns: repeat(auto-fit, 200px) 是无效的——浏览器不认这种纯固定值写法。必须用 minmax() 提供弹性范围：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)));
这里 280px 是单列最小宽度（防止过窄），1fr 是最大可伸展值。当容器宽 1200px 时，最多放 4 列（1200 ÷ 280 ≈ 4.3 → 向下取整）；缩到 800px 就只剩 2 列。注意：1fr 不是“填满剩余空间”的模糊概念，而是和其它 fr 单位按比例分配剩余空间，此处因每列都用 1fr，所以均分。
auto-fit 在 grid-auto-rows 上基本没用
auto-fit 和 auto-fill 只在 grid-template-columns 或 grid-template-rows 的 repeat() 中生效。如果用 grid-auto-rows: minmax(100px, auto)，它控制的是**隐式网格行**（即超出显式定义的行之后新增的行），此时不存在“空轨道合并”逻辑，auto-fit 根本不被识别。想让行也自适应？得靠 grid-template-rows 显式定义，例如：
立即学习“前端免费学习笔记（深入）”；
grid-template-rows: repeat(auto-fit, minmax(120px, 1fr)));
但要注意：这要求子元素明确指定 grid-row 或依赖源顺序填充，否则容易错位。
常见失效原因：父容器没设 width / 子项没设 grid-column
以下情况会让 auto-fit 看似“不响应”：
- 父容器是
display: inline-grid或未设width，导致宽度由内容撑开，失去缩放基础 - 子元素用了
grid-column: span 2等手动跨列，破坏了repeat()的自动分配节奏 - CSS 重置或继承样式把
box-sizing改成content-box，而 padding/margin 没算进minmax()的 280px 里，实际列宽超限被迫换行
最稳妥的调试方式：给父容器加 outline: 1px solid red 看真实宽度，再用开发者工具检查每列的 computed width 是否符合预期。别信“看起来满了”，要信 devtools 里显示的数值。
