Html Tailwind 网格行高度可防止拉伸到最高行的所有相同高度

编辑2:以下是添加了填充文本的示例:https://play.tailwindcss.com/KPrBMJr6vI

你可以在2XL的视区宽度上看到，3号和4号S的高度都是超高的.区块5的行为如我所愿，但我现在只需要区块3和4来保持它们各自的内容集所需的高度.

编辑1:当我从最外层的div中删除所有的"grid-row-X"定义时，它会出现，除了当它是2xl媒体大小时，它们都开始完全按照我想要的方式运行.下面的一切似乎都很完美.不确定要添加什么定义才能获得块3、4和5，以自动调整内容的高度，但可以拉伸5以"填充".

我有以下布局/代码:

<div class="grid-rows-7 mt-2 grid grid-cols-1 gap-2 text-white lg:mt-4 lg:grid-cols-5 lg:grid-rows-6 lg:gap-4 2xl:grid-rows-5">
  <div class="col-span-1 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-5">
    <div class="relative h-auto overflow-hidden rounded-lg"></div>
  </div>

  <div class="col-span-1 col-start-1 row-span-1 row-start-2 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-2 lg:row-span-4 2xl:col-span-2 2xl:row-span-3">Block 2: Left Column</div>

  <div class="col-span-1 col-start-1 row-start-3 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-3 lg:col-start-3 lg:row-start-2 2xl:col-span-2 2xl:col-start-3 2xl:row-start-2">
    <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-white">Block 3</h5>
    <div class="mb-4 items-center justify-between pl-3 pr-3 sm:flex sm:space-x-2 sm:space-y-0">
      <div class="relative inline-flex items-center justify-start"></div>
    </div>

    <div class="mb-4 content-center pl-3 pr-3">
      <div class="flex w-full items-center justify-start pb-2">
        <span class="flex text-sm font-medium text-gray-500 dark:text-gray-400">
          <div role="status" class="max-w-sm animate-pulse">
            <div class="h-1 w-24 rounded-full bg-gray-200 dark:bg-gray-700"></div>
          </div>
        </span>
      </div>
    </div>
  </div>

  <div class="col-span-1 col-start-1 row-start-4 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-3 lg:col-start-3 lg:row-start-3 2xl:col-span-2 2xl:col-start-3 2xl:row-start-3">
    <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-white">Block 4</h5>
    <div class="mb-4 items-center justify-between pl-3 pr-3 sm:flex sm:space-x-2 sm:space-y-0">
      <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">blah</span>
    </div>
  </div>

  <div class="col-span-1 col-start-1 row-start-5 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-3 lg:col-start-3 lg:row-start-4 2xl:col-span-2 2xl:col-start-3 2xl:row-start-4">
    <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-white">Block 5</h5>
  </div>

  <div class="col-span-1 col-start-1 row-span-1 row-start-6 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-3 lg:col-start-3 lg:row-start-5 2xl:col-span-1 2xl:col-start-5 2xl:row-span-3 2xl:row-start-2">
    <div class="mb-8 block w-full">
      <h5 class="text-xl font-medium text-gray-500 dark:text-white">Block 6: Right Column</h5>
    </div>
    <div class="block w-full pt-8"></div>
  </div>

  <div class="col-span-1 row-start-7 rounded-lg bg-white p-4 shadow dark:bg-zinc-950 lg:col-span-5 lg:row-start-6 2xl:row-start-5">Block 7</div>
</div>

它会生成以下布局:

我正在努力想办法让每一行只有一个高度的自己的内容.如果第二块或第六块的高度超过第三块、第四块和第五块的总和，我希望第五块自动填充剩余高度，以匹配第二块或第六块S的整体高度(第二块有时内容更长，有时第六块会更长).

目前，My Block 6的内容最长，所有的块最终都具有相同的高度.例如，当我在第一块(第一行)上使用"h-Fit"时，div高度会像我想要的那样缩小到内容，但第二行的距离仍然在页面下方，就像它的高度仍然与Block 6‘S的高度相匹配.

我如何才能让所有块使用适合其自身内容的高度，并根据需要让块2、5和6根据这些列中内容最长的那一列"填充"？