使用Grid布局结合auto-fit与minmax()可创建自适应图片画廊，.gallery设置display: grid和grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，自动调整列数并保证最小宽度，配合gap与object-fit: cover确保美观响应式效果，无需媒体查询即可在不同屏幕下智能排布，大屏多列、小屏单列，布局整齐且维护简单。
在CSS中实现一个响应式图片画廊，Grid 布局结合 auto-fit 与 minmax() 是最简洁高效的方式。它能自动调整列数以适应容器宽度，同时保证每列有最小宽度限制，避免图片被过度压缩。
使用 grid auto-fit 与 minmax() 创建自适应网格
通过 grid-template-columns 配合 repeat(auto-fit, ...) 和 minmax()，可以让网格列根据可用空间自动换行和伸缩。
基本语法如下：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
解释：
立即学习“前端免费学习笔记（深入）”；
- auto-fit：自动填充列数。浏览器会尽可能多地放入符合最小宽度的列，并拉伸它们填满容器。
- minmax(200px, 1fr)：每列最小宽度为 200px，最大为 1fr（即均分剩余空间）。
- 当容器宽度不足以容纳新的 200px 列时，网格会自动换行，减少每行列数。
图片项的基本样式设置
确保每个图片项目正确显示，可设置如下样式：
.gallery-item {
overflow: hidden;
border-radius: 8px;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
这样图片会填满容器且不被拉伸，保持美观比例。
响应式无需媒体查询
这种写法天然响应式，不需要写多个 @media 断点。无论屏幕大小如何变化，网格都会自动计算合适的列数。
例如：
- 大屏：可能显示 5~6 列
- 平板：自动变为 3~4 列
- 手机：最小 200px 触发单列布局
内容始终对齐整齐，视觉体验一致。
基本上就这些。用 repeat(auto-fit, minmax(最小宽度, 最大分配)) 的组合，就能让图片画廊智能排布，开发效率高，维护也简单。不复杂但容易忽略细节。
