Tailwind Grid行高问题：长内容致全行增高，如何保持其他行紧凑？

问题核心在于你使用了grid-rows-3类，它等价于grid-template-rows: repeat(3, minmax(0, 1fr))——这会让网格的三行均分容器高度，所以当第一行内容变长时，所有行都会被强制拉到相同高度，导致其他行也跟着变高。

要让其他行保持紧凑，你需要修改网格的行高规则，让第一行自适应内容高度，其余行仅占用自身内容所需的最小空间。具体操作如下：

1. 移除grid-rows-3类
2. 改用自定义行高配置：grid-rows-[auto_min-content_min-content]，其中：
   • auto：让第一行根据内容自动调整高度
   • min-content：让第二、第三行仅占用内容所需的最小高度（内容少时用auto效果一致）

修改后的完整代码：

<div class="grid grid-cols-9 my-3 leading-4 grid-rows-[auto_min-content_min-content]">
    <div class="col-start-1 col-span-5 row-start-1 flex">
        <p class="flex-shrink-0">Company Name：</p>
        <p>ABCD EFGGGG HIJK LMNOPQRS TUVV WXYZZZ</p>
    </div>
    <div class="col-start-6 col-span-full row-start-1">
        Date：2022/05/16
    </div>
    <div class="col-start-1 col-span-5 row-start-2 flex">
        <p class="flex-shrink-0">Contact：</p>
        <p class="break-all">Wenston Black</p>
    </div>
    <div class="col-start-6 col-span-full row-start-2">
        Tel：XXXXXXXXXXX
    </div>
    <div class="col-start-1 col-span-5 row-start-3">
        email：XXXXXXXX@gmail.com
    </div>
    <div class="col-start-6 col-span-full row-start-3">
        Fax：xxxxxxxxxxxx
    </div>
</div>

你也可以根据需求调整行高规则，比如如果希望第二、第三行保持相同的紧凑高度，也可以用grid-rows-[auto_1fr_1fr]，但min-content更贴合“紧凑”需求，因为它会严格匹配内容高度，不会额外占用空间。

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