CSS Grid的repeat函数配合自动填充属性，是实现响应式网格布局的常用方案，其中auto-fill和auto-fit是最容易混淆的两个属性值，两者的核心差异体现在对剩余空间的处理逻辑上。
基础概念说明
auto-fill和auto-fit都用于grid-template-columns: repeat(auto-*, minmax(最小宽度, 1fr))的语法结构中，作用是让浏览器根据容器宽度自动计算可以放置多少列网格，每一列的最小宽度由minmax的第一个参数决定，最大宽度为1fr平分剩余空间。
两者的核心区别在于：当容器宽度足够容纳更多网格列，但实际没有对应数量的网格子项时，auto-fill会保留这些空的网格轨道，而auto-fit会将这些空的网格轨道折叠，把剩余空间分配给已有的网格子项。
代码示例对比
1. 基础HTML结构
我们先准备一个通用的容器和5个网格子项，方便后续对比两种属性的表现：
<div class="grid-container"> <div class="grid-item">子项1</div> <div class="grid-item">子项2</div> <div class="grid-item">子项3</div> <div class="grid-item">子项4</div> <div class="grid-item">子项5</div> </div>
2. auto-fill的表现
给容器设置auto-fill属性，最小列宽为200px：
.grid-container {
display: grid;
/* 自动填充，最小列宽200px，最大1fr */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
padding: 10px;
border: 1px solid #ccc;
}
.grid-item {
height: 100px;
background-color: #e0f7fa;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
当容器宽度为1000px时，1000px / 200px = 5，刚好能放5列，此时5个子项各占一列，表现和auto-fit一致。当容器宽度为1200px时，1200px可以容纳6个200px的列，但只有5个子项，此时auto-fill会保留第6个空的网格轨道，已有的5列不会占满整个容器宽度，第6列的位置是空的。
3. auto-fit的表现
仅修改repeat的参数，其他样式不变：
.grid-container {
display: grid;
/* 自动适配，最小列宽200px，最大1fr */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
padding: 10px;
border: 1px solid #ccc;
}
同样容器宽度为1200px时，虽然可以容纳6个200px的列，但auto-fit会折叠第6个空的网格轨道，把剩余的空间全部分配给已有的5个网格子项，5列会占满整个容器的宽度，每一列的实际宽度会大于200px。
差异总结
我们可以通过表格更清晰地对比两者的差异：
| 对比维度 | auto-fill | auto-fit |
|---|---|---|
| 空轨道处理 | 保留空轨道 | 折叠空轨道 |
| 子项宽度表现 | 子项宽度不超过minmax设置的最大宽度，剩余空间留空 | 子项会扩展占满剩余空间，宽度可能超过minmax的最小宽度 |
| 适用场景 | 需要固定列数占位，即使没有内容也要保留轨道位置 | 希望子项始终占满容器宽度，不需要空轨道占位 |
实际开发选择建议
如果你的布局需求是：不管有没有足够的子项，都要按照最小列宽计算最大可容纳的列数，即使有空位置也保留，那么选择auto-fill。比如固定展示卡片的网格，即使当前只有3个卡片，也要预留后续卡片的位置，保持布局整齐。
如果你的需求是：子项要尽可能占满容器宽度，没有子项的位置不需要保留，那么选择auto-fit。比如响应式的内容列表，希望在不同屏幕宽度下，内容都能铺满整个容器，不会出现右侧大片空白的情况。
需要注意的是，当容器宽度刚好能容纳整数倍的最小列宽，且没有剩余空间时，auto-fill和auto-fit的表现是完全一致的，只有在容器宽度有剩余空间且子项数量不足时，两者的差异才会体现出来。