html - 使用 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 Grid 实现此目的？ 谢谢。

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>