html - Deviantart 风格图库 CSS

Question

我正在尝试使用 Django 和 python 制作一个图片库。我是 HTML 和 CSS 的新手，需要在网格中显示图像。我希望一行中的一个图像具有相同的高度但不同的宽度，例如Deviantart 的。列数应该不同，如下图所示。

我可以像这样在画廊中显示图像。

但图像的高度不同，而且顺序不正确。有没有办法实现像第一张图片中的画廊？

感谢您的时间！

更新：这是我目前正在使用的代码。

.gallery-container {
  column-count: 4;
  column-gap: 5px;
  margin: 20px;
}

.gallery-item {
  display: inline-block;
  width: 100%;
  background: #1e1f26;
  border-radius: 6px;
}

.gallery-item img {
  display: block;
  border-radius: 5px;
  width: 100%;
}

<div class="gallery-container">
  <div class="gallery-item">
    <img src="https://images.unsplash.com/photo-1485550409059-9afb054cada4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=401&q=80" alt="">
  </div>
  <div class="gallery-item">
  <img src="https://images.unsplash.com/photo-1493612276216-ee3925520721?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="">
  </div>
  <div class="gallery-item">
    <img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=802&q=80" alt="">
  </div>
  <div class="gallery-item">
  <img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80" alt="">
  </div>
  <div class="gallery-item">
    <img src="https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=334&q=80" alt="">
  </div>
  <div class="gallery-item">
  <img src="https://images.unsplash.com/photo-1496449903678-68ddcb189a24?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="">
  </div>
</div>

标签： htmlcssimage-gallery

Answer 1

使用CSS Grid，您可以完成这种“马赛克”图库布局。您只需要在网格项目上使用grid-column和grid-row来指定它们应该占据的特定列和行。这应该是您进一步自定义网格并尝试实现像素完美的“Deviantart”风格图像库的一个很好的起点。

.gallery-container {
  display: grid;
  grid-template-columns: 7% 10%;
  grid-template-rows: repeat(10, minmax(3rem, 8rem));
  gap: 5px;
  margin: 0 auto;
}

.gallery-item {
  display: inline-block;
  width: 100%;
  height: 100%;
  background: #1e1f26;
  border-radius: 6px;
}

.one {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.two {
  grid-column: 2 / 5;
  grid-row: 1 / 3;
}

.three {
  grid-column: 5;
  grid-row: 1 / 3;
}

.four {
  grid-column: 6;
  grid-row: 1 / 3;
}

.five {
  grid-column: 8 / 10;
  grid-row: 1 / 3;
}

.six {
  grid-column: 1 / 4;
  grid-row: 3 / 5;
}

.seven {
  grid-column: 4;
  grid-row: 3 / 5;
}

.eight {
  grid-column: 5;
  grid-row: 3 / 5;
}

.nine {
  grid-column: 6 / 10;
  grid-row: 3 / 5;
}

.gallery-item img {
  display: block;
  border-radius: 5px;
  object-fit: cover;
  height: 100%;
  width: 100%;
  max-width: 100%;
}

<div class="gallery-container">
  <div class="gallery-item one">
    <img src="https://images.unsplash.com/photo-1485550409059-9afb054cada4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=401&q=80" alt="">
  </div>
  <div class="gallery-item two">
  <img src="https://images.unsplash.com/photo-1493612276216-ee3925520721?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="">
  </div>
  <div class="gallery-item three">
    <img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=802&q=80" alt="">
  </div>
  <div class="gallery-item four">
  <img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80" alt="">
  </div>
  <div class="gallery-item five">
    <img src="https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=334&q=80" alt="">
  </div>
  <div class="gallery-item six">
  <img src="https://images.unsplash.com/photo-1496449903678-68ddcb189a24?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="">
  </div>
  <div class="gallery-item seven">
  <img src="https://bukk.it/ackbar.jpg" alt="">
  </div>
  <div class="gallery-item eight">
  <img src="https://media.contentapi.ea.com/content/dam/gin/images/2017/01/star-wars-battlefront-key-art.jpg.adapt.crop3x5.533p.jpg" alt="">
  </div>
  <div class="gallery-item nine">
  <img src="https://www.starwarsnewsnet.com/wp-content/uploads/2021/01/A-Family-at-War.png" alt="">
  </div>
</div>