Deviantart 风格图片库 CSS

Question

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

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

但是图片高度不一样，顺序也不对。有什么方法可以像第一张图片那样实现图库吗？

感谢您的宝贵时间！

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

.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>

Answer 1

可以吗？

.gallery-container {
  display: flex;
  flex-wrap: wrap;
  width:100%;
}

.gallery-item {
  display: flex;
  flex-wrap: wrap; 
  background: #1e1f26;
  border-radius: 6px;
}

.gallery-item img { 
  border-radius: 5px;  
  max-width: 400px;
  margin: 5px;
}

<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>

Answer 2

在网格项上使用 CSS Grid you can accomplish this sort of "mosaic" image gallery layout. You just need to utilize grid-column and 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>

Deviantart 风格图片库 CSS

Deviantart style image gallery CSS

html

css

image-gallery