使用CSS Grid的auto-fit与minmax()结合gap属性可实现响应式图片画廊：1. auto-fit根据容器宽度自动调整列数，每列最小200px，避免空白；2. 相比auto-fill保留空轨道，auto-fit拉伸项目更紧凑；3. gap设固定间距（如1rem），避免额外margin导致错位；4. 图片设置width:100%、height:200px及object-fit:cover，确保统一美观显示。该方案无需媒体查询或JS，适配多端。
实现响应式图片画廊的多列布局，关键在于灵活使用 CSS Grid 的 auto-fit 与 auto-fill 配合 minmax() 和 gap 属性。这种方式无需媒体查询即可自动适配不同屏幕尺寸，保持良好的视觉效果。
1. 使用 grid auto-fit 实现自适应列数
auto-fit 能让网格容器根据可用空间自动填充列，当剩余空间不足时，自动换行并调整每行项目数量。
示例代码：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
说明：每张图片最小宽度为 200px，若容器宽度不足以容纳新列，Grid 会自动减少列数，确保不出现空白区域。
2. auto-fill 与 auto-fit 的区别及适用场景
两者都用于动态生成网格轨道，但行为略有不同：
- auto-fill：创建尽可能多的轨道，即使内容不够也会保留空轨道
- auto-fit：在内容填满后，会拉伸项目以占据剩余空间
对于图片画廊，通常推荐使用 auto-fit，避免右侧留白，使布局更紧凑美观。
3. 利用 gap 控制间距保持一致性
gap 属性设置行与列之间的间距，是响应式布局中维持视觉平衡的关键。
建议设置固定像素值或使用 rem 单位，保证在不同设备上间距协调：
.gallery {
gap: 1rem; /* 响应式间距 */
}
注意：不要对 grid 项目额外添加 margin，否则会影响自动布局计算，导致错位。
4. 图片自身样式优化显示效果
为防止图片变形或溢出，需设置一致的尺寸处理方式：
.gallery img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
}
object-fit: cover 确保图片裁剪居中显示，适合统一尺寸的画廊展示。
基本上就这些。通过 auto-fit + minmax + gap 的组合，可以轻松实现一个无需 JS、无须断点控制的真正响应式图片画廊布局。结构简洁，维护成本低，适配移动端和桌面端表现良好。
