尾windcss的高度不平等的网格

Question

有没有办法使用parwindcss实现不等柱高度的网格（基于每个DIV的内容）？

Answer 1

一种方法是使用flex在同一列内创建不等高度的网格。

请使用全页视图查看以下代码。

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