使用CSS Grid可高效创建响应式图片画廊。通过grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))实现自适应列数，容器根据空间自动换行并均匀分布列宽。结合gap: 10px设置图片间距，避免外边距问题，布局更整洁。为图片设置width: 100%、固定高度和object-fit: cover，确保视觉统一且不拉伸。该方法无需媒体查询即可实现美观、自适应的画廊布局，解决传统布局中常见对齐与间距问题。
使用CSS Grid实现图片画廊布局是一种高效且灵活的方式，尤其适合响应式设计。通过grid-template-columns配合repeat(auto-fill, ...)和gap属性，可以轻松创建自动换行、间距均匀的多列图片网格。
使用 auto-fill 实现自适应列数
auto-fill可以让Grid容器在可用空间内尽可能多地填充列，而无需指定固定列数。结合minmax()函数，能确保每列在不同屏幕尺寸下保持合理宽度。
例如，设置每列最小宽度为200px，最大为1fr：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
浏览器会根据容器宽度自动计算可容纳的列数。当空间不足时，列会自动换行，实现响应式效果。
立即学习“前端免费学习笔记（深入）”；
利用 gap 控制图片间距
gap属性用于设置Grid单元格之间的间距，替代传统外边距带来的对齐问题。
可以统一设置行列间距，也可分别用row-gap和column-gap控制：
.gallery {
gap: 10px;
}
这样每张图片之间都会保持10px的间隔，布局更整洁，无需额外处理边距塌陷或最后一行对齐问题。
图片适配与响应式优化
为了让图片在网格中表现良好，建议设置width: 100%并使用object-fit控制裁剪方式：
.gallery img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 8px;
}
这能保证所有图片高度一致，内容居中裁剪，视觉更统一。配合父容器的Grid设置，整体画廊美观且自适应。
基本上就这些。通过auto-fill、minmax和gap的组合，无需媒体查询就能构建一个现代、简洁、响应式的图片画廊布局。不复杂但容易忽略细节，比如图片默认拉伸或间距不均的问题，用这套方法都能自然解决。
