使用auto-fit实现响应式图片画廊，能自动调整列宽填满空间，避免空白；而auto-fill可能在窄屏下预留过多轨道导致拉伸异常。核心代码为repeat(auto-fit, minmax(200px, 1fr))，配合gap、object-fit等优化视觉效果，适用于内容不确定的场景，兼容性好且简洁高效。
响应式图片画廊在现代网页设计中非常常见，利用CSS Grid结合auto-fit和auto-fill可以轻松实现自适应布局，无需媒体查询也能让图片在不同屏幕尺寸下合理排列。
auto-fit 与 auto-fill 的基本区别
auto-fill会尽可能多地创建指定大小的网格轨道，即使容器空间不足，也会保留空轨道。而auto-fit会在有剩余空间时将空轨道折叠，使现有项目拉伸填满可用空间。
两者都配合minmax()和repeat()使用，是构建弹性网格的关键。
- auto-fill：填满所有可能的列，留空白
- auto-fit：自动调整列宽，不留下空白
使用 repeat(auto-fit, minmax()) 创建响应式画廊
这是最常用的响应式图片网格写法：
立即学习“前端免费学习笔记（深入）”；
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
说明：
- minmax(200px, 1fr) 表示每列最小200px，最大为1份弹性空间
- 当容器宽度缩小到无法容纳新列时，auto-fit会停止新增列，并让已有列自动扩展
- 图片可设置 width: 100%; height: auto; 保持比例
对比 auto-fill 的视觉差异
若将上面代码中的 auto-fit 换成 auto-fill：
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
在较宽屏幕上，两者表现相似。但在窄屏下，auto-fill 可能出现只显示一两张图却占满整行的情况，因为系统仍“预留”了多个200px轨道，但内容不足导致拉伸异常。
auto-fit 更适合内容数量不确定的图片画廊，因为它更智能地适应实际内容。
优化建议与注意事项
为了获得更好的视觉效果，可以添加一些额外控制：
- 给图片容器设置 overflow: hidden; border-radius: 8px; 提升美观度
- 使用 object-fit: cover; 防止图片变形
- 在父容器加 justify-items: center; 处理单行少图居中问题
- 测试极端尺寸，确保小屏下不会出现过窄列
基本上就这些。用repeat(auto-fit, minmax(最小宽度, 1fr))是目前最简洁高效的响应式图片网格方案，兼容性良好，代码量少，推荐作为默认选择。
