Grid of unequal heights in TailWindCSS

Question

Is there a way to achieve a grid of unequal column heights (based on content in each div) using TailWindCSS ?

Answer 1

One way is to use flex to create a grid of unequal heights within the same column.

Please use full page view to see below code.

<script src="https://cdn.tailwindcss.com"></script>
<div class="container m-auto p-4">
  <div class="flex flex-row space-x-4">
    <!-- First Col -->
    <div class="flex w-full flex-col space-y-4 bg-red-200">
      <div class="h-40 rounded-lg bg-red-500"></div>
      <div class="h-32 rounded-lg bg-red-500"></div>
      <div class="h-60 rounded-lg bg-red-500"></div>
    </div>
    <!-- Sec Col -->
    <div class="flex w-full flex-col space-y-4 bg-blue-200">
      <div class="h-12 rounded-lg bg-blue-500"></div>
      <div class="h-72 rounded-lg bg-blue-500"></div>
      <div class="h-48 rounded-lg bg-blue-500"></div>
    </div>
    <!-- Third Col -->
    <div class="flex w-full flex-col space-y-4 bg-green-200">
      <div class="h-28 rounded-lg bg-green-500"></div>
      <div class="h-40 rounded-lg bg-green-500"></div>
      <div class="h-64 rounded-lg bg-green-500"></div>
    </div>
  </div>
</div>