CSS 图片画廊

用 CSS Grid/Flexbox 创建响应式图片画廊 · 难度：入门 · +15XP

CSS 图片画廊 —— 打造精美的照片墙

用CSS Grid可以轻松创建一个响应式图片画廊（Image Gallery），不需要JavaScript。

基础布局

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
}
.gallery img {
  width: 100%;
  height: 250px;
  object-fit: cover;  /* 裁剪填充，保持比例 */
  border-radius: 8px;
  transition: transform 0.3s;
}
.gallery img:hover {
  transform: scale(1.05);
}

auto-fill + minmax的组合让画廊自动计算每行放几张图，响应式无需写断点。

动手练习

1. 基础练习：做一个6张图片的画廊，用CSS Grid排列，hover时图片微微放大。
2. 进阶应用：参考Pinterest做瀑布流画廊——用CSS columns或多列布局实现不等高图片紧密排列。
3. 项目实战：做一个摄影作品集页面——图片画廊+灯箱预览（点击放大）+筛选分类按钮。