使用CSS Grid结合auto-fit和minmax可创建响应式图片画廊，.gallery设置display: grid和grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，实现自动布局；auto-fit使有内容的列拉伸填满容器，避免空白，比auto-fill更适用于画廊；图片设置width: 100%、height: auto保持比例，配合gap和border-radius优化视觉效果；无需媒体查询即可适配多设备。
使用 CSS Grid 实现图片画廊，auto-fit 和 auto-fill 是两个非常实用的关键字，能帮助我们快速创建响应式多列布局，无需媒体查询就能自适应不同屏幕尺寸。
Grid 布局基础设置
要实现一个图片画廊，先定义容器使用 Grid 布局。通过 grid-template-columns 配合 repeat() 函数和 minmax()，可以动态生成列。
基本结构如下：
.gallery {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
这个设置表示：自动填充尽可能多的列，每列最小 200px，最大为 1fr（均分剩余空间）。
立即学习“前端免费学习笔记（深入）”；
auto-fit vs auto-fill 的区别
两者都用于在容器中尽可能多地放置网格轨道，但行为略有不同：
- auto-fill：不管内容是否存在，都会创建符合条件的网格轨道。空位会保留，可能导致最后一行出现空白格子。
- auto-fit：只创建有内容的列，并将这些列拉伸填满容器。更适合图片画廊，避免留白。
对于图片画廊，推荐使用 auto-fit，视觉更紧凑美观。
响应式图片自适应方案
为了让图片在网格中正常显示，需设置图片样式：
.gallery img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
}
这样图片会撑满所在网格单元，并保持宽高比。配合父容器的 Grid 设置，可在不同设备上自动调整列数。
你可以根据设计需求调整 minmax() 中的最小值，比如改为 minmax(150px, 1fr) 以支持更多小屏设备。
实际应用示例
完整 HTML 结构示例：
<div class="gallery"> <img src="img1.jpg" alt="图片1"> <img src="img2.jpg" alt="图片2"> <img src="img3.jpg" alt="图片3"> <img src="img4.jpg" alt="图片4"> <img src="img5.jpg" alt="图片5"> </div>
CSS 样式：
.gallery {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
padding: 16px;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
这样就实现了一个无需 JavaScript、无需媒体查询的响应式图片画廊。
基本上就这些。合理利用 auto-fit 和 minmax，Grid 能自动处理列数变化，适配手机、平板到桌面各种场景，特别适合初级项目中的图片展示需求。
