使用css Grid可轻松创建响应式图片画廊。首先构建包含图片的html容器，接着用display: grid设置三列等宽布局并添加间距，通过媒体查询在小屏幕上改为两列或单列，也可使用repeat(auto-fit, minmax(200px, 1fr))实现自适应列数，配合悬停缩放效果提升交互体验。
想要创建一个简洁美观的图片画廊，CSS网格布局（Grid Layout）是一个强大且灵活的选择。它能让你轻松控制图片的排列方式、间距和响应式行为，无需依赖复杂的JavaScript或第三方库。下面通过一个实战示例，带你一步步实现一个响应式的简易图片画廊。
1. 基础HTML结构
先构建一个简单的HTML结构，包含一个容器和若干图片项：
<div class="gallery"> <img src="image1.jpg" alt="风景1"> <img src="image2.jpg" alt="风景2"> <img src="image3.jpg" alt="风景3"> <img src="image4.jpg" alt="风景4"> <img src="image5.jpg" alt="风景5"> <img src="image6.jpg" alt="风景6"> </div>
2. 使用CSS Grid设置网格布局
接下来用CSS定义网格容器，并设置列数、行高和间距：
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); /* 三列等宽 */ gap: 10px; /* 图片之间的间距 */ padding: 10px; } <p>.gallery img { width: 100%; height: auto; border-radius: 8px; transition: transform 0.3s ease; }</p><p>.gallery img:hover { transform: scale(1.05); }</p>
这里grid-template-columns: repeat(3, 1fr)表示创建三列，每列平均分配容器空间。gap属性统一设置行列间距，让布局更整洁。
立即学习“前端免费学习笔记（深入）”；
3. 实现响应式适配
为了让画廊在不同设备上都能良好显示，加入媒体查询动态调整列数：
@media (max-width: 768px) { .gallery { grid-template-columns: repeat(2, 1fr); /* 平板：两列 */ } } <p>@media (max-width: 480px) { .gallery { grid-template-columns: 1fr; /<em> 手机：单列 </em>/ } }</p>
随着屏幕变小，图片自动从三列变为两列再到单列堆叠，保证可读性和美观性。
4. 可选优化：自适应列数
如果你希望列数根据容器自动调整，可以使用repeat(auto-fit, minmax())语法：
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 10px; }
这段代码的意思是：每列最小200px，最大为1fr，浏览器会自动计算最多能放几列。这种方式更加灵活，适合内容宽度不固定的情况。
基本上就这些。通过简单的HTML和CSS，你就能实现一个现代、响应式的图片画廊。关键是理解grid的结构控制能力和响应式设计思路。实际项目中可以根据需求添加阴影、标题、懒加载等增强功能。