如何在Tailwind CSS中实现不同高度列的堆叠布局？

想要实现的效果 #

当前问题 #

我不想在顶部第三列使用row-span-3，因为这会让它尺寸过大。目前的实现里，第一行所有列高度被强制拉平，我需要避免这种情况：列要能根据自身内容灵活调整高度并堆叠，Partner ID和Promo code列需保持紧凑尺寸，不受右侧高列的高度影响。

当前实现效果：

修改方案 #

核心思路是把整体布局拆分为左右两个独立区域，让左右部分的高度互不干扰：

• 主网格设为2列布局，左侧放置两个小卡片+下方大卡片（用垂直flex容器排列），右侧放置高卡片+下方子网格
• 左右区域各自独立计算高度，左侧小卡片就能保持自身内容高度，不会被右侧高卡片强制拉平

修改后的代码 #

<div class="grid grid-cols-2 gap-4 text-white">
  <!-- 左侧区域：垂直排列的小卡片和大容器 -->
  <div class="flex flex-col gap-4">
    <div class="bg-[#0d1129] rounded-lg p-8">
      <h1 class="text-[#636da8] uppercase">Promo code</h1>
      <h1 class="text-white font-semibold text-xl flex flex-row">
        {{ promocode }}
        <button style="font-size: 20px; margin-left: auto; color: #1b57c4" class="cursor-pointer">
          <font-awesome-icon icon="fa-regular fa-copy" class="ml-auto" />
        </button>
      </h1>
    </div>
    <div class="bg-[#0d1129] rounded-lg p-8">
      <h1 class="text-[#636da8] uppercase">Partner ID</h1>
      <h1 class="text-white font-semibold text-xl flex flex-row">
        {{ id }}
        <button style="font-size: 20px; margin-left: auto; color: #1b57c4" class="cursor-pointer">
          <font-awesome-icon icon="fa-regular fa-copy" class="ml-auto" />
        </button>
      </h1>
    </div>
    <div class="border-2 border h-full"></div>
  </div>

  <!-- 右侧区域：高卡片+下方子网格 -->
  <div class="flex flex-col gap-4">
    <div class="bg-[#0d1129] rounded-lg p-8">
      <h1 class="text-[#636da8] uppercase">Custom Partner Link</h1>
      <h1 class="text-white font-semibold mb-5 text-xl flex flex-row">
        {{ partnerLink }}
        <button style="font-size: 20px; margin-left: auto; color: #1b57c4" class="cursor-pointer">
          <font-awesome-icon icon="fa-regular fa-copy" class="ml-auto" />
        </button>
      </h1>
      <button class="bg-[#1b57c4] font-semibold px-12 py-2 rounded-lg">
        <font-awesome-icon icon="fa-regular fa-play" class="ml-auto" />
        How It Works?
      </button>
    </div>

    <div class="grid grid-cols-2 gap-4">
      <div class="border-2 border">8</div>
      <div class="border-2 border">9</div>
      <div class="border-2 border">10</div>
      <div class="border-2 border">11</div>
      <div class="border-2 border col-span-2">12</div>
    </div>
  </div>
</div>

说明 #

• 主网格拆分后，左右区域高度完全独立，左侧小卡片不再被右侧高元素影响
• 右侧下方的子网格保留原有的2列布局，和原结构逻辑一致
• 整体布局的灵活性更强，能适配不同内容的高度变化

内容的提问来源于stack exchange，提问作者Shulz