移除网格列默认高度：Next.js+Tailwind CSS布局问题

你遇到的核心问题是CSS Grid的行高度统一特性——Grid会强制同一行的所有单元格高度匹配该行最高元素，哪怕设置items-start也只是让内容靠上对齐，行高本身仍会被拉高，导致下方出现不必要的空隙。要实现“无内容的分类紧凑排列”，更适合用Flexbox流式布局，或者调整Grid的自动流行为。

方案1：改用Flexbox布局（推荐） #

Flexbox的flex-wrap: wrap会让元素在空间不足时自动换行，且每个元素高度由自身内容决定，不会强制同行元素高度一致。结合Tailwind类实现如下：

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>

<div class="container flex flex-wrap gap-x-5 gap-y-2">
  <div class="border flex-[0_0_calc(20%-theme(spacing.5))]">
    <h1 class="border border-red-600">Category</h1>
  </div>
  <div class="border flex-[0_0_calc(20%-theme(spacing.5))]">
    <h1 class="border border-red-600">Category</h1>
    <p>SubCategory -1</p>
    <p>SubCategory -2</p>
    <p>SubCategory -3</p>
  </div>
  <div class="border flex-[0_0_calc(20%-theme(spacing.5))]">
    <h1 class="border border-red-600">Category</h1>
  </div>
  <div class="border flex-[0_0_calc(20%-theme(spacing.5))]">
    <h1 class="border border-red-600">Category</h1>
  </div>
  <div class="border flex-[0_0_calc(20%-theme(spacing.5))]">
    <h1 class="border border-red-600">Category</h1>
  </div>
  <div class="border flex-[0_0_calc(20%-theme(spacing.5))]">
    <h1 class="border border-red-600">Category</h1>
  </div>
  <div class="border flex-[0_0_calc(20%-theme(spacing.5))]">
    <h1 class="border border-red-600">Category</h1>
  </div>
  <div class="border flex-[0_0_calc(20%-theme(spacing.5))]">
    <h1 class="border border-red-600">Category</h1>
  </div>
  <div class="border flex-[0_0_calc(20%-theme(spacing.5))]">
    <h1 class="border border-red-600">Category</h1>
  </div>
</div>

关键说明： #

• flex-wrap: wrap：让元素超出容器宽度时自动换行
• flex-[0_0_calc(20%-theme(spacing.5))]：固定每个元素宽度为20%减去横向gap的宽度（5列每列默认占20%，但gap会额外占用空间，因此需要计算扣除）
• 无需额外设置items-start，Flex默认就是内容高度由自身决定

方案2：调整Grid布局（仅适合特定场景） #

如果一定要用Grid，可以通过grid-auto-flow: dense让元素填充前面行的空隙，但这种方式依赖元素排列顺序，灵活性有限：

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>

<div class="container grid grid-cols-5 gap-x-5 gap-y-2 [grid-auto-flow:dense]">
  <div class="border">
    <h1 class="border border-red-600">Category</h1>
  </div>
  <div class="border">
    <h1 class="border border-red-600">Category</h1>
    <p>SubCategory -1</p>
    <p>SubCategory -2</p>
    <p>SubCategory -3</p>
  </div>
  <div class="border">
    <h1 class="border border-red-600">Category</h1>
  </div>
  <div class="border">
    <h1 class="border border-red-600">Category</h1>
  </div>
  <div class="border">
    <h1 class="border border-red-600">Category</h1>
  </div>
  <div class="border">
    <h1 class="border border-red-600">Category</h1>
  </div>
  <div class="border">
    <h1 class="border border-red-600">Category</h1>
  </div>
  <div class="border">
    <h1 class="border border-red-600">Category</h1>
  </div>
  <div class="border">
    <h1 class="border border-red-600">Category</h1>
  </div>
</div>

注意： #

grid-auto-flow: dense会让后续元素自动填充前面行的空白，但如果你的元素有特定顺序要求，可能会打乱排列逻辑，因此更推荐Flexbox方案。

内容的提问来源于stack exchange，提问作者Md Pervej Hossain