使用 auto-fit 更推荐于图片画廊，能自动填充容器并避免空白，结合 minmax 和 gap 实现响应式多列布局，使图像在不同屏幕下均匀分布且视觉紧凑。
使用 CSS Grid 实现图片画廊的多列布局非常灵活，尤其适合响应式设计。通过 auto-fill、auto-fit 和 gap 属性，可以轻松创建自动换行、自适应列数的网格布局。
1. 使用 grid-template-columns 配合 auto-fill
auto-fill 会尽可能多地创建符合最小宽度的列，即使容器空间不足也会生成空轨道。
说明： 当你希望容器中填满指定最小宽度的列（哪怕某些列为空），用 auto-fill 更合适。示例代码：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
- minmax(200px, 1fr) 表示每列最小 200px，最大占 1 份可用空间
- auto-fill 自动计算能放下多少个 200px 的列，并创建对应数量的轨道
- 即使某行最后一项后有剩余空间，也会保留空位并换行
2. 使用 auto-fit 替代 auto-fill
auto-fit 与 auto-fill 类似，但会将空轨道折叠，让已有列拉伸填满剩余空间。
建议： 在图片画廊中更推荐 auto-fit，视觉更紧凑，避免右侧大片空白。
示例代码：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
- 当项目数量少时，auto-fit 会让这些项目扩展以填满整个容器
- 更适合移动端或小屏设备上的图片展示
3. 使用 gap 控制间距
gap 属性设置行与列之间的间隔，无需额外 margin，避免外边距塌陷等问题。
- gap: 16px; 设置行列统一间距
- 也可以分开写：row-gap: 10px; column-gap: 16px;
- Grid 内部自动处理间距分布，每一项周围留白均匀
4. 完整示例：响应式图片画廊
结合以上特性，构建一个实用的图片画廊布局：
.image-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
padding: 16px;
}
.image-gallery img {
width: 100%;
height: auto;
border-radius: 8px;
object-fit: cover;
}
- minmax(180px, 1fr) 确保在小屏幕上也能正常换行
- auto-fit 让图像在大屏幕上适当拉宽，提升视觉效果
- gap 保持一致的视觉节奏，适配各种屏幕尺寸
