使用CSS网格创建镶嵌样式网格

Question

我正在尝试创建类似这样的东西。

您可以在此图像中看到3列宽度相同的列。它具有不同高度的行。 到目前为止，我已经尝试过code pen

    <div class="wrapper">
  <div><img src="https://source.unsplash.com/random/1200x600" alt=""></div>
  <div><img src="https://source.unsplash.com/random/400x800" alt=""></div>
  <div><img src="https://source.unsplash.com/random/500x1000" alt=""></div>
  <div><img src="https://source.unsplash.com/random/1600x1000" alt=""></div>
  <div><img src="https://source.unsplash.com/random/1600x1000" alt=""></div>
  <div><img src="https://source.unsplash.com/random/800x1000" alt=""></div>
  <div><img src="https://source.unsplash.com/random/1000x900" alt=""></div>
  <div><img src="https://source.unsplash.com/random/600x1200" alt=""></div>
  <div><img src="https://source.unsplash.com/random/1200x400" alt=""></div>
  <div><img src="https://source.unsplash.com/random/600x1200" alt=""></div>
  <div><img src="https://source.unsplash.com/random/1100x200" alt=""></div>
  <div><img src="https://source.unsplash.com/random/1600x1200" alt=""></div>
  <div><img src="https://source.unsplash.com/random/1200x300" alt=""></div>
  <div><img src="https://source.unsplash.com/random/1200x1200" alt=""></div>
  <div><img src="https://source.unsplash.com/random/1000x1200" alt=""></div>
</div>

Css：

    .wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  grid-gap: 10px;
}
.wrapper div {
  border: 2px solid whitesmoke;
  background: #ccc;
}
.wrapper div img {
  width: 100%;
}

每次刷新时，我都会得到不同大小的不同图像。所以我需要一行内容的高度。如何使用CSS网格实现此目的？ 谢谢。

Answer 1

如果您要使用纯CSS解决方案，则可以不使用column-count: 3容器。唯一的缺点是它将垂直重新排列网格项目。

.container {
  column-count: 3;
}

.box {
  background: pink;
  margin-bottom: 20px;
  height: 100px;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>