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