使用CSS Grid实现响应式图片画廊，核心是利用网格容器的自动列数和最小宽度控制，让图片根据视口大小自动调整排列方式。相比传统的浮动或弹性盒子，Grid在处理二维布局时更加直观，尤其适合画廊这类规整的图文展示场景。
一、基础HTML结构
先准备一个包含多张图片的容器，每张图片放在一个figure标签中，方便后续统一控制样式。
<div class="gallery"> <figure><img src="https://ipipp.com/img1.jpg" alt="图1"></figure> <figure><img src="https://ipipp.com/img2.jpg" alt="图2"></figure> <figure><img src="https://ipipp.com/img3.jpg" alt="图3"></figure> <figure><img src="https://ipipp.com/img4.jpg" alt="图4"></figure> <figure><img src="https://ipipp.com/img5.jpg" alt="图5"></figure> <figure><img src="https://ipipp.com/img6.jpg" alt="图6"></figure> </div>
二、核心CSS Grid样式
通过grid-template-columns配合repeat()、auto-fit和minmax()，可以实现列数随宽度自适应。下面是最关键的布局代码。
.gallery {
display: grid;
/* 自动填充列，每列最小180px，最大占满剩余空间 */
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
padding: 12px;
}
.gallery figure {
margin: 0;
}
.gallery img {
width: 100%;
height: 160px;
object-fit: cover;
display: block;
border-radius: 6px;
}
属性说明
- auto-fit：自动根据容器宽度计算能放几列，空间多余时拉伸列。
- minmax(180px, 1fr)：每列最小180px，最大均分剩余空间，保证小屏不拥挤。
- gap：统一控制网格间距，替代旧的margin写法。
三、进阶：固定行高与跨列效果
如果想让某张图片占两列，可以使用grid-column属性单独设置。以下代码让第一个图片横跨两列，形成视觉焦点。
.gallery figure:first-child {
grid-column: span 2;
}
@media (max-width: 480px) {
.gallery figure:first-child {
grid-column: span 1;
}
}
四、完整可运行示例
将结构和样式合并，就是一个最简响应式图片画廊。你可以直接复制到本地HTML文件查看效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid画廊</title>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
padding: 12px;
}
.gallery figure { margin: 0; }
.gallery img {
width: 100%;
height: 160px;
object-fit: cover;
display: block;
border-radius: 6px;
}
.gallery figure:first-child { grid-column: span 2; }
@media (max-width: 480px) {
.gallery figure:first-child { grid-column: span 1; }
}
</style>
</head>
<body>
<div class="gallery">
<figure><img src="https://ipipp.com/a.jpg" alt="a"></figure>
<figure><img src="https://ipipp.com/b.jpg" alt="b"></figure>
<figure><img src="https://ipipp.com/c.jpg" alt="c"></figure>
<figure><img src="https://ipipp.com/d.jpg" alt="d"></figure>
</div>
</body>
</html>
五、常见问题
问：图片高度不一致怎么办？使用object-fit: cover配合固定height即可裁剪填充，保持网格整齐。
掌握上述Grid技巧后，无需复杂媒体查询就能覆盖绝大多数响应式画廊需求，后续只需调整minmax中的最小宽度即可适配不同设计稿。