Deviantart 风格图库 CSS答案

【问题标题】：Deviantart style image gallery CSSDeviantart 风格图库 CSS
【发布时间】：2021-06-01 06:29:28
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

能否将您的 HTML 和 CSS 包含在您尝试过的内容中？
@TannerDolby 我更新了问题，我应该早点包含代码。

标签： html css image-gallery

【解决方案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>

【讨论】：

感谢您的回答。在您回答后，我进行了一些搜索，并在这里找到了我正在寻找的 css-tricks.com/adaptive-photo-layout-with-flexbox。您的答案也有效，但我发现这更容易。谢谢！
@LuciferMorningstar 欢迎您。编码愉快！

【解决方案2】：

这样行吗？

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

【讨论】：