使用CSS制作图片画廊网格布局，核心是利用CSS Grid的相关属性实现图片的规整排列，同时兼顾响应式适配和视觉效果优化，整个过程不需要复杂的JavaScript逻辑，仅通过样式设置就能完成。
基础网格布局搭建
首先我们需要准备基础的HTML结构，用来承载画廊中的图片内容，结构如下：
<div class="gallery"> <img src="https://picsum.photos/300/200?random=1" alt="画廊图片1"> <img src="https://picsum.photos/300/200?random=2" alt="画廊图片2"> <img src="https://picsum.photos/300/200?random=3" alt="画廊图片3"> <img src="https://picsum.photos/300/200?random=4" alt="画廊图片4"> <img src="https://picsum.photos/300/200?random=5" alt="画廊图片5"> <img src="https://picsum.photos/300/200?random=6" alt="画廊图片6"> </div>
接下来给容器添加网格布局的基础样式，设置列数和列宽，让图片自动排列成网格：
.gallery {
display: grid;
/* 设置3列，每列等宽 */
grid-template-columns: repeat(3, 1fr);
/* 网格行间距和列间距都是16px */
gap: 16px;
/* 容器内边距 */
padding: 16px;
max-width: 1200px;
margin: 0 auto;
}
图片样式优化
默认的图片可能会拉伸变形，我们需要给图片添加样式，保证图片按比例显示，同时优化视觉效果：
.gallery img {
/* 图片宽度占满所在网格单元格 */
width: 100%;
/* 高度自适应，保持图片原始比例 */
height: auto;
/* 图片裁剪为圆角 */
border-radius: 8px;
/* 添加轻微阴影提升层次感 */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
/* 设置过渡效果，方便后续添加交互 */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
响应式适配调整
为了让画廊在不同屏幕尺寸下都有良好的展示效果，我们需要通过媒体查询调整不同宽度下的列数：
/* 屏幕宽度小于768px时，显示2列 */
@media (max-width: 768px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 12px;
}
}
/* 屏幕宽度小于480px时，显示1列 */
@media (max-width: 480px) {
.gallery {
grid-template-columns: 1fr;
gap: 10px;
padding: 10px;
}
}
添加交互效果
我们可以给图片添加悬停效果，提升用户交互体验，当鼠标悬停在图片上时，图片会轻微放大并加深阴影：
.gallery img:hover {
/* 悬停时放大1.05倍 */
transform: scale(1.05);
/* 加深阴影效果 */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
常见问题说明
- 如果图片高度不一致导致网格行高不统一，可以给
img标签设置object-fit: cover属性，同时固定图片高度，让图片自动裁剪填充单元格。 - 如果使用
repeat(auto-fill, minmax(200px, 1fr))作为grid-template-columns的值，可以实现更灵活的自动列数调整，不需要手动写媒体查询也能适配不同屏幕。 - 网格的
gap属性可以分别设置行间距和列间距，比如gap: 16px 20px表示行间距16px，列间距20px。
完整示例代码
以下是整合了所有功能的完整代码，可直接复制到本地运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS图片画廊网格布局</title>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 16px;
max-width: 1200px;
margin: 0 auto;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery img:hover {
transform: scale(1.05);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 12px;
}
}
@media (max-width: 480px) {
.gallery {
grid-template-columns: 1fr;
gap: 10px;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="gallery">
<img src="https://picsum.photos/300/200?random=1" alt="画廊图片1">
<img src="https://picsum.photos/300/200?random=2" alt="画廊图片2">
<img src="https://picsum.photos/300/200?random=3" alt="画廊图片3">
<img src="https://picsum.photos/300/200?random=4" alt="画廊图片4">
<img src="https://picsum.photos/300/200?random=5" alt="画廊图片5">
<img src="https://picsum.photos/300/200?random=6" alt="画廊图片6">
</div>
</body>
</html>