手动设置Grid行高时如何移除行之间的间隙

我希望为Grid容器内的第一个div指定特定高度，该行需小于下一行。但设置第一行和第二行的高度后，两行之间出现了较大间隙（附图）：

初始代码 #

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-pink-500 h-[40rem] mt-[0.75rem]">
  <div class="grid grid-cols-3 grid-rows-2 pt-[3.125rem] pl-[22rem] pr-[22rem]">
    <div class="col-span-3 col-start-1 col-end-4 bg-slate-400 h-[2rem]">-</div>
    <div class="bg-blue-500 h-[15rem]">-</div>
    <div class="bg-yellow-500">-</div>
    <div class="bg-green-500">-</div>
  </div>
</div>

尝试的代码 #

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-pink-500 h-[40rem] mt-[0.75rem]">
  <div class="grid grid-cols-3 grid-rows-2 pt-[3.125rem] pl-[22rem] pr-[22rem] h-[17rem]">
    <div class="col-span-3 col-start-1 col-end-4 bg-slate-400 h-[2rem]">-</div>
    <div class="bg-blue-500 h-[15rem]">-</div>
    <div class="bg-yellow-500 h-[15rem]">-</div>
    <div class="bg-green-500 h-[15rem]">-</div>
  </div>
</div>

解决方案 #

问题根源是使用grid-rows-2时，Grid会自动将容器高度分配给两行，若容器高度大于子元素总高度，剩余空间会变成两行之间的间隙。以下两种方法可解决：

方法1：直接定义Grid行高（推荐） #

通过grid-template-rows直接指定两行的高度，让子元素自动填充行高，无需单独设置子元素高度：

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-pink-500 h-[40rem] mt-[0.75rem]">
  <div class="grid grid-cols-3 grid-template-rows-[2rem_15rem] pt-[3.125rem] pl-[22rem] pr-[22rem]">
    <div class="col-span-3 bg-slate-400">-</div>
    <div class="bg-blue-500">-</div>
    <div class="bg-yellow-500">-</div>
    <div class="bg-green-500">-</div>
  </div>
</div>

方法2：固定容器高度并消除间隙 #

在你原有尝试的基础上，确保容器高度等于两行子元素高度总和，同时显式设置gap-0避免潜在默认间隙：

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-pink-500 h-[40rem] mt-[0.75rem]">
  <div class="grid grid-cols-3 grid-rows-2 gap-0 pt-[3.125rem] pl-[22rem] pr-[22rem] h-[17rem]">
    <div class="col-span-3 bg-slate-400 h-[2rem]">-</div>
    <div class="bg-blue-500 h-[15rem]">-</div>
    <div class="bg-yellow-500 h-[15rem]">-</div>
    <div class="bg-green-500 h-[15rem]">-</div>
  </div>
</div>

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