auto-fill会保留空轨道以保持列结构，适合画廊等需对齐的布局；auto-fit则拉伸实际内容列以填满容器，避免空白，适合动态内容。两者结合minmax可实现灵活响应式网格，无需媒体查询即可适应不同屏幕尺寸，提升布局效率与视觉效果。
在使用CSS Grid布局实现响应式设计时，auto-fill和auto-fit是两个非常实用的关键字，常配合repeat()和minmax()使用。它们都能自动创建网格轨道，但行为有明显区别，理解这些差异有助于更精准地控制布局。
auto-fill：填充可用空间，保留空轨道
当使用auto-fill时，浏览器会根据容器的可用空间尽可能多地生成列轨道，即使没有内容填充这些轨道，也会保留其位置。
这意味着，即使某一行的项目数量不足，网格依然会保持多个等宽列，空位留白。
常见用法示例：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
在这个例子中，每个列至少150px宽，如果容器宽度允许，就会不断创建新列。即使子元素不够填满所有列，空白列仍存在。
auto-fit：拉伸已有轨道，不保留空位
auto-fit的行为类似auto-fill，但它不会保留空轨道。它只生成足够容纳实际内容的列，然后将这些列拉伸以填满容器。
这使得布局看起来更紧凑，更适合内容动态变化的场景。
同样代码仅替换关键字：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
此时，如果有3个子元素，就只生成3列（或更少，取决于屏幕大小），并自动拉伸占满整个容器宽度。
实际应用场景对比
假设我们要做一个响应式的卡片网格：
- 使用 auto-fill：适合希望保持“多列”视觉结构的布局，比如画廊、产品列表，即使某些行不满也希望维持列对齐。
- 使用 auto-fit：适合内容较少时希望避免右侧大片空白的情况，让已有的卡片自然撑满，提升视觉平衡。
简单记忆方式：
auto-fill = 填满位置，不管有没有人坐
auto-fit = 有人坐才占位，然后大家一起摊位子
基本上就这些。掌握这两个关键字的区别，能让你在响应式Grid布局中更灵活地应对不同设计需求，无需依赖媒体查询也能实现流畅的自适应效果。
