自动填充 - auto-fill & auto-fit
使用 auto-fill 和 auto-fit 创建自适应网格
/* auto-fill */
.grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
/* auto-fit */
.grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
/* auto-fit */
.grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
🤔 auto-fill 是如何计算列数的？
关键：minmax(150px, 1fr) 中的 150px 是最小值
以本页为例（容器宽度 900px）：
1. 可用宽度 = 900px - padding(15×2) = 870px
2. 尝试创建列：
• 1列：870px ÷ 1 = 870px ✅ (≥150px)
• 2列：(870px - gap 15px) ÷ 2 = 427.5px ✅
• 3列：(870px - gap 30px) ÷ 3 = 280px ✅
• 4列：(870px - gap 45px) ÷ 4 = 206.25px ✅
• 5列：(870px - gap 60px) ÷ 5 = 162px ✅
• 6列：(870px - gap 75px) ÷ 6 = 132.5px ❌ (<150px)
结论：最多创建 5 列！
但是只有 4 个项目，所以显示 4 列 + 1 个空列（auto-fill 保留空列）
1. 可用宽度 = 900px - padding(15×2) = 870px
2. 尝试创建列：
• 1列：870px ÷ 1 = 870px ✅ (≥150px)
• 2列：(870px - gap 15px) ÷ 2 = 427.5px ✅
• 3列：(870px - gap 30px) ÷ 3 = 280px ✅
• 4列：(870px - gap 45px) ÷ 4 = 206.25px ✅
• 5列：(870px - gap 60px) ÷ 5 = 162px ✅
• 6列：(870px - gap 75px) ÷ 6 = 132.5px ❌ (<150px)
结论：最多创建 5 列！
但是只有 4 个项目，所以显示 4 列 + 1 个空列（auto-fill 保留空列）
💡 提示：打开浏览器开发者工具，调整窗口宽度，观察列数变化！
auto-fill（保留空列）
当容器有剩余空间时，auto-fill 会创建空列（即使没有内容）
1
2
3
4
auto-fit（拉伸填充）
当容器有剩余空间时，auto-fit 会折叠空列，让现有项目拉伸填充
1
2
3
4
🔍 auto-fit 的计算过程
关键区别：auto-fit 会折叠空列，让现有项目拉伸
计算步骤（容器宽度 900px，4个项目）：
第1步：计算最多能创建多少列（与 auto-fill 相同）
可用宽度 = 900px - padding(30px) = 870px
最多可创建：5列（每列最小150px）
第2步：检查实际项目数量
实际项目：4个
空列数量：5 - 4 = 1个空列
第3步：折叠空列（auto-fit 的关键！）
• auto-fill：保留空列，4个项目占4列，剩余空间留白
• auto-fit：折叠空列，4个项目拉伸填充整个容器
第4步：重新分配空间
可用宽度：870px
gap 总宽度：15px × 3 = 45px
每列宽度：(870px - 45px) ÷ 4 = 206.25px
结果：4个项目，每个约 206px 宽（拉伸填充整个容器）
第1步：计算最多能创建多少列（与 auto-fill 相同）
可用宽度 = 900px - padding(30px) = 870px
最多可创建：5列（每列最小150px）
第2步：检查实际项目数量
实际项目：4个
空列数量：5 - 4 = 1个空列
第3步：折叠空列（auto-fit 的关键！）
• auto-fill：保留空列，4个项目占4列，剩余空间留白
• auto-fit：折叠空列，4个项目拉伸填充整个容器
第4步：重新分配空间
可用宽度：870px
gap 总宽度：15px × 3 = 45px
每列宽度：(870px - 45px) ÷ 4 = 206.25px
结果：4个项目，每个约 206px 宽（拉伸填充整个容器）
💡 提示：调整窗口宽度到很宽时，auto-fit 的项目会拉伸，而 auto-fill 会留白！
📊 auto-fill vs auto-fit 可视化对比
窄容器（450px）：两者效果相同，因为没有空列
auto-fill（保留空列）
1
2
3
计算：(450 - 20) ÷ 4 = 107.5px，可创建4列
结果：3个项目 + 1个空列（右侧留白）
结果：3个项目 + 1个空列（右侧留白）
auto-fit（折叠空列）
1
2
3
计算：可创建4列，但空列被折叠
结果：3个项目拉伸填充，每个约 143px（而不是 107px）
结果：3个项目拉伸填充，每个约 143px（而不是 107px）
📋 auto-fill vs auto-fit 对比总结
| 特性 | auto-fill | auto-fit |
|---|---|---|
| 列数计算 | 根据容器宽度和 minmax 计算 | 根据容器宽度和 minmax 计算 |
| 空列处理 | ✅ 保留空列（留白） | ❌ 折叠空列（拉伸项目） |
| 项目宽度 | 受 minmax 限制，不会超过计算值 | 会拉伸填充整个容器 |
| 适用场景 | 固定尺寸的项目（如图标、缩略图） | 需要拉伸的项目（如卡片、文章列表） |
| 容器很宽时 | 右侧会有留白空间 | 项目会拉伸填充，无留白 |
| 项目数量少时 | 保持原始尺寸，右侧留白 | 拉伸到更大尺寸，填满容器 |
使用场景：
/* 响应式卡片布局 - 推荐使用 auto-fit */
.card-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* 卡片会自动拉伸填充空间 */
}
/* 固定尺寸的图标网格 - 可以使用 auto-fill */
.icon-grid {
grid-template-columns: repeat(auto-fill, minmax(80px, 80px));
/* 图标保持固定大小，不拉伸 */
}
关键区别：
• auto-fill：保留空列，适合固定尺寸的项目
• auto-fit：折叠空列，适合需要拉伸的项目
/* 响应式卡片布局 - 推荐使用 auto-fit */
.card-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* 卡片会自动拉伸填充空间 */
}
/* 固定尺寸的图标网格 - 可以使用 auto-fill */
.icon-grid {
grid-template-columns: repeat(auto-fill, minmax(80px, 80px));
/* 图标保持固定大小，不拉伸 */
}
关键区别：
• auto-fill：保留空列，适合固定尺寸的项目
• auto-fit：折叠空列，适合需要拉伸的项目