auto-fill会预留空白轨道，适合预设位置；auto-fit则折叠空轨道让内容填满空间，更适合紧凑布局。两者结合minmax()实现响应式网格，关键区别在于是否保留空列。
在使用CSS Grid布局时，auto-fill和auto-fit是两个非常实用的关键字，它们常与repeat()函数结合使用，帮助我们创建响应式、自适应的网格布局。虽然它们看起来很相似，但在实际行为上有明显区别。下面通过实战示例来深入理解两者的用法和差异。
auto-fill：自动填充可用空间
当使用auto-fill时，Grid容器会尽可能多地创建符合指定尺寸的网格轨道，即使这些轨道当前没有内容填充，也会保留空间。
这在你希望预留位置、支持未来动态插入内容时特别有用。
示例代码：
.container {<br>
display: grid;<br>
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));<br>
gap: 10px;<br>
}
说明：
- 每列最小150px，最大为1fr（等分剩余空间）
- 只要容器宽度允许，就会不断生成新列，哪怕没有子元素填入
- 如果有3个子元素，在大屏幕上可能看到3个item占据多列，后面还留有空白列
auto-fit：自动适应内容大小
auto-fit的行为类似auto-fill，但有一个关键区别：它会将空的轨道“折叠”掉，让现有内容扩展以填满可用空间。
.container {<br>
display: grid;<br>
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));<br>
gap: 10px;<br>
}
说明：
- 同样是每列最小150px，最大1fr
- Grid会创建足够容纳内容的列，然后把空余的空白列合并到已有列中
- 如果有3个子元素，它们会自动拉伸占满整个容器宽度
实战对比场景
假设我们要做一个响应式的卡片列表：
- 在小屏幕上每行1张卡
- 在大屏幕上尽可能多显示，且卡片等宽
- 内容数量不固定
使用auto-fill：即使只有2张卡片，在宽屏上仍会显示多个空白列，适合预留给“添加更多”的交互设计。
使用auto-fit：卡片始终填满整行，视觉更紧凑，适合图库或产品展示类布局。
注意事项与技巧
这两个关键字只在repeat()中起作用，常见搭配minmax()实现弹性列宽。
- 避免在
auto-fit中设置固定列宽，可能导致布局异常 - 配合
minmax(200px, 1fr)可防止列过窄或过度拉伸 - 在容器宽度不足时，两者都会自动换行（如果设置了
grid-auto-rows）
基本上就这些。掌握auto-fill和auto-fit的区别，能让你更灵活地控制Grid布局的响应行为。简单说：要留空位用 auto-fill，要填满用 auto-fit。
