使用 auto-fit 和 minmax() 创建响应式页脚，.footer 采用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，使列在小屏堆叠、大屏均分；配合媒体查询在 600px 下缩小间距、1200px 上固定四列，实现全设备适配。
要实现一个响应式页脚布局，CSS Grid 提供了强大的工具，特别是 auto-fit 和 auto-fill 配合媒体查询，可以轻松创建自适应的页脚结构。下面介绍如何结合使用这些特性。
理解 auto-fill 与 auto-fit 的区别
在使用 repeat() 函数创建网格列时，auto-fill 和 auto-fit 控制网格轨道的生成方式：
- auto-fill：尽可能多地创建指定大小的列，即使容器空间不足也会保留空轨道。
- auto-fit：创建能容纳的列后，自动拉伸这些列以填满剩余空间。
对于页脚布局，auto-fit 更常用，因为它能让项目在小屏幕上堆叠，在大屏幕上均匀分布并拉伸填充。
基础Grid页脚结构
假设页脚包含4个功能区块（如“关于我们”、“联系方式”、“隐私政策”、“友情链接”），我们可以这样写HTML：
立即学习“前端免费学习笔记（深入）”；
CSS 中使用 Grid 实现响应式布局：
.footer {
display: grid;
gap: 20px;
padding: 40px;
background: #333;
color: white;
}
.footer-item {
padding: 20px;
background: #555;
border-radius: 8px;
}
使用 minmax() + auto-fit 实现响应式列数
核心技巧是使用 repeat(auto-fit, minmax(250px, 1fr))：
.footer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 40px;
background: #333;
color: white;
}
这段代码含义：
- 每列最小宽度为 250px，最大为 1fr（均分剩余空间）。
- 当容器宽度不足以放下一个 250px 的新列时，auto-fit 不会创建额外轨道，而是让已有列自动拉伸。
- 屏幕越小，列数越少，最终在手机上变成单列堆叠。
结合媒体查询进一步优化
虽然 auto-fit 已具备良好响应性，但你仍可通过媒体查询微调特定断点：
@media (max-width: 600px) {
.footer {
padding: 20px;
font-size: 14px;
}
.footer-item h4 {
font-size: 16px;
}
}
@media (min-width: 1200px) {
.footer {
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
}
这样可以在超大屏固定为4列，避免 auto-fit 在极宽屏幕上过度拉伸。
基本上就这些。使用 repeat(auto-fit, minmax()) 是现代 CSS 响应式布局的推荐做法，简洁高效，无需为每个断点写复杂规则。页脚结构自然适配各种设备，维护成本低。不复杂但容易忽略。
