auto-fill会保留空白轨道，auto-fit则收缩空轨道并拉伸内容；两者结合minmax()可创建自适应网格。例如repeat(auto-fit, minmax(250px,1fr))能实现最小250px、等分剩余空间的响应式布局，容器宽度变化时自动调整列数并避免留白，适用于卡片、图库等需内容撑满的场景，无需额外媒体查询即可实现移动端友好设计。
响应式网格布局是现代网页设计的重要组成部分。CSS Grid 提供了 auto-fill 和 auto-fit 两个关键字，配合 repeat() 和 minmax() 可以轻松实现自适应的网格结构。它们能根据容器宽度自动填充列数，无需为不同屏幕写多个媒体查询。
auto-fill 与 auto-fit 的基本语法
使用 grid-template-columns 配合 repeat() 函数可以定义重复的列轨道。其中 auto-fill 和 auto-fit 是 repeat() 的第一个参数，表示“自动重复”。常见写法如下：
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
这行代码的意思是：尽可能多地创建最小 200px、最大 1fr 的列，超出容器则换行（实际不会换行，而是减少每行数量）。
auto-fill：填满可用空间，保留空轨道
当使用 auto-fill 时，浏览器会根据容器宽度计算能容纳多少个指定尺寸的列，并预先生成这些轨道，即使子元素数量不足，也会留出空白位置。
例如：
- 容器宽 800px，每列最小 200px
- 最多可放 4 列（800 / 200 = 4）
- 即使只有 2 个子元素，仍会生成 4 列轨道
视觉上会出现右侧留白，适合需要对齐或预留插入空间的场景。
auto-fit：收缩未使用的轨道
auto-fit 的行为类似 auto-fill，但会将没有内容的额外轨道收缩掉，让现有项目扩展以填满剩余空间。
同样 800px 容器和 200px 最小列宽：
- 计算出最多 4 列
- 若有 2 个项目，则只保留 2 列轨道
- 这两个项目会拉伸占据全部宽度
这种特性更适合卡片列表、图库等希望内容始终撑满容器的设计。
结合 minmax 实现真正响应式
最实用的写法是结合 minmax() 来设定弹性列宽：
.grid {
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
含义：
- 每列最小 250px，最大 1fr（均分剩余空间）
- auto-fit 确保无空列
- 屏幕越小，每行列数越少，直到变为单列堆叠
这种模式在移动端表现自然，无需额外媒体查询即可实现流畅适配。
基本上就这些。掌握 auto-fill 和 auto-fit 的区别，再搭配 minmax，就能写出简洁高效的响应式网格。不复杂但容易忽略细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
