auto-fill会创建尽可能多的列并保留空轨道，而auto-fit则让有内容的列拉伸填满容器；两者结合minmax()可实现无需媒体查询的响应式布局，适用于不同场景：auto-fill适合卡片对齐，auto-fit适合内容自适应。
在使用CSS Grid布局时，auto-fill 和 auto-fit 是两个非常实用的关键字，它们配合 repeat() 和 minmax() 可以实现响应式网格布局，无需媒体查询就能自动调整列数。下面介绍它们的用法和区别。
auto-fill 的作用
当使用 auto-fill 时，Grid会尽可能多地创建符合最小宽度要求的列，即使容器空间不足，也会生成“空轨道”（即隐藏的列），保持网格项的排列规律。
适合场景：希望容器中始终填满固定尺寸的列，哪怕某些列为空。
示例：
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
解释：每列最小150px，最大1fr，浏览器会根据容器宽度尽可能多放150px以上的列，即使空间刚好不够也不合并。
立即学习“前端免费学习笔记（深入）”；
auto-fit 的作用
auto-fit 与 auto-fill 类似，但它会将多余的空白空间平均分配给现有网格项，使它们拉伸填满容器。
适合场景：希望内容列自动扩展，充分利用可用空间。
示例：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
解释：如果只有2个项目且容器很宽，这两个项目会自动拉伸占满整行；而 auto-fill 在同样情况下可能生成多个空轨道。
auto-fill 与 auto-fit 的关键区别
- auto-fill：创建尽可能多的轨道，不管有没有内容填充。
- auto-fit：只创建有内容的轨道，并把剩余空间分给这些轨道。
- 小屏幕下两者表现接近；大屏幕或项目少时，auto-fit 更紧凑美观。
实用建议
搭配 minmax() 使用效果最佳：
- 想做图片墙、卡片布局？用 auto-fill 保证每行对齐。
- 做导航菜单或动态内容？用 auto-fit 让元素自然撑开。
- 设置合理的 min 宽度，避免换行太早或文字挤压。
基本上就这些。掌握 auto-fill 和 auto-fit 能让你的 Grid 布局更灵活，响应式设计更轻松。不复杂但容易忽略细节。
