CSS Grid布局实战：创建响应式图片画廊
在现代网页设计中，响应式图片画廊是展示内容的常见方式。本文将使用CSS Grid布局创建一个自适应的图片画廊，无需媒体查询即可适应不同屏幕尺寸。
1. HTML结构
首先创建基本的HTML结构，包含一个容器和多个图片项：
<div class=”gallery”>
<div class=”gallery-item”>
<img src=”image1.jpg” alt=”风景图片1″>
</div>
<!– 更多图片项 –>
</div>
<div class=”gallery-item”>
<img src=”image1.jpg” alt=”风景图片1″>
</div>
<!– 更多图片项 –>
</div>
2. CSS Grid核心代码
关键点在于grid-template-columns属性的repeat(auto-fill, minmax())组合：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 15px;
}
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 15px;
}
这段代码实现了：
- auto-fill: 自动填充可用空间
- minmax(250px, 1fr): 每列最小250px，最大1等分
- grid-gap: 控制项目间距
3. 添加悬停效果
增强用户体验的悬停动画效果：
.gallery-item {
transition: transform 0.3s ease;
overflow: hidden;
}
.gallery-item:hover {
transform: scale(1.03);
}
.gallery-item img {
transition: transform 0.5s ease;
}
.gallery-item:hover img {
transform: scale(1.1);
}
transition: transform 0.3s ease;
overflow: hidden;
}
.gallery-item:hover {
transform: scale(1.03);
}
.gallery-item img {
transition: transform 0.5s ease;
}
.gallery-item:hover img {
transform: scale(1.1);
}
4. 实际效果展示
可自行尝试，不做展示
这种实现方式的优势在于：代码简洁、维护方便、完全响应式，且不需要JavaScript。通过调整
minmax()中的数值，可以轻松控制不同屏幕尺寸下的列数。
