我同意之前的回答，CSS columns是最适合这些设计的。
下面是一个在TailwindCSS中使用列的示例。有关其他示例，请参阅documentation。

<script src="https://cdn.tailwindcss.com"></script>

<div class="columns-3 gap-5 p-5">
  <img class="w-full rounded-lg mb-5" src="https://picsum.photos/id/237/800/600" />
  <img class="w-full rounded-lg mb-5" src="https://picsum.photos/id/28/800" />
  <img class="w-full rounded-lg mb-5" src="https://picsum.photos/id/1/600/900" />
  <img class="w-full rounded-lg mb-5" src="https://picsum.photos/id/55/800/600" />
  <img class="w-full rounded-lg mb-5" src="https://picsum.photos/id/36/800" />
  <img class="w-full rounded-lg mb-5" src="https://picsum.photos/id/92/900/1100" />
</div>

你需要使用columns来实现，在css中，当你使用flex，flexbox，或者grid时，没有办法在一行中有不同的高度，但是如果你使用垂直的单独的columns，并将所有columns的父元素设置为flex元素，你就会达到这个效果。

.parent {
  display: flex;
}
.child {
  display: block;
  width: 100%;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>