auto-fit 更智能，自动拉伸项目填满空间，适合紧凑响应式布局；auto-fill 更保守，保留多余轨道留白，适用于需预留位置的场景。
在CSS Grid布局中，
auto-fill
和
auto-fit
配合
minmax()
函数可以实现非常灵活的动态响应式网格，无需使用媒体查询就能让容器自动调整列数以适应不同屏幕尺寸。
auto-fill 与 auto-fit 的基本区别
auto-fill
会尽可能多地创建符合条件的网格轨道（即使没有内容填充），而
auto-fit
则会在有内容时才拉伸或创建轨道，并将空轨道折叠。
auto-fill：
多余空间保留，列数固定但可能留白
auto-fit：
自动拉伸已有列，填满可用空间，更紧凑
minmax() 的作用
minmax(min, max)
定义一个尺寸范围，用于设置每列的最小和最大宽度。常用于 grid-template-columns 中，确保网格项不会过小或过大。
例如：
表示每列最小 200px，最大为等分的可用空间（1fr）。
立即学习
“
前端免费学习笔记（深入）
”；
实际用法示例
下面是一个典型的响应式卡片网格布局写法：
Eclipse导入Android或其他的JAVA项目的正确方法 WORD版
本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
下载
解释：
：根据容器宽度自动计算列数
：每列至少 250px，多余空间平均分配
当容器变窄到无法容纳新列时，自动换行并重新分布
如果换成
：
即使某一行只有两个项目，也会预留出足够位置创建更多 250px 的列（但不渲染内容），造成右侧空白。
适用场景建议
选择哪个取决于设计需求：
想要
紧凑、自适应拉伸
的效果 → 使用
auto-fit
想保留
潜在列位
（如未来插入元素）→ 使用
auto-fill
移动端优先的卡片流布局 → 推荐
auto-fit + minmax
基本上就这些。掌握这个组合后，大多数响应式网格都可以用几行CSS搞定，不需要JavaScript或复杂断点。关键是理解 auto-fit 更“智能”，auto-fill 更“保守”。
minmax(200px, 1fr).grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
repeat(auto-fit, ...)minmax(250px, 1fr)auto-fill.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}