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