How to align vertically multiple cards with different heights

Question

enter image description here

Please refer above image, I tried to use flex but I can not get the result that I expected.

I'm working on tailwind css. I want to be the result like green cards in the image. Example to understand much appropriate.

Answer 1

You will need to use columns for this, in css when you use flex, flexbox, or grid there is no way to have different heights inside 1 row, but if you use seperate columns that are vertical, and set the parent of all columns to a flex element you will achieve the results.

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

Answer 2

I agree with previous answer that CSS columns are best for these designs.

Below is an example using columns in TailwindCSS. Refer to the documentation for additional examples.

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