Tailwind Grid行高优化：避免统一拉伸，实现自适应与填充

问题核心 #

固定的grid-rows-X类会强制Grid内所有行按定义的高度比例分配，这就是2XL视口下Block3、4被强行拉高的原因——grid-rows-3让三行均分容器高度，哪怕内容很短也会被拉伸。移除该类后其他视口正常，是因为默认的自动行高会自适应内容。

解决方案 #

1. 移除全局固定行数定义：删掉外层的grid-rows-*类，让行高度默认跟随内容（Tailwind默认就是grid-auto-rows-auto，可省略显式声明）。
2. 让Block5填充剩余高度：给Block5添加h-full类，它会自动填充所在行的剩余空间（该行高度由Block2或Block6的内容撑开）。
3. 精准控制2XL视口布局：通过col-span-*类单独定义2XL下每个区块的列跨度，避免固定行数带来的强制拉伸限制。

修改后的代码示例 #

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-6 gap-4">
  <!-- Block1 -->
  <div class="col-span-1 md:col-span-2 lg:col-span-3 2xl:col-span-3 bg-blue-200 p-4">
    Block1<br>内容自适应高度
  </div>
  <!-- Block2 -->
  <div class="col-span-1 md:col-span-1 lg:col-span-1 2xl:col-span-1 bg-green-200 p-4">
    Block2<br>多行内容<br>测试高度<br>测试高度
  </div>
  <!-- Block3 -->
  <div class="col-span-1 md:col-span-1 lg:col-span-1 2xl:col-span-1 bg-yellow-200 p-4">
    Block3<br>短内容
  </div>
  <!-- Block4 -->
  <div class="col-span-1 md:col-span-2 lg:col-span-1 2xl:col-span-1 bg-purple-200 p-4">
    Block4<br>短内容
  </div>
  <!-- Block5 -->
  <div class="col-span-1 md:col-span-1 lg:col-span-1 2xl:col-span-1 bg-red-200 p-4 h-full">
    Block5<br>填充剩余高度
  </div>
  <!-- Block6 -->
  <div class="col-span-1 md:col-span-1 lg:col-span-1 2xl:col-span-1 bg-orange-200 p-4">
    Block6<br>多行内容<br>测试高度
  </div>
</div>

关键调整说明 #

• Block3、4现在完全跟随自身内容高度，不会被强行拉伸
• Block5的h-full会让它自动匹配所在行的高度（由Block2或Block6的内容撑开）
• 所有视口下的区块默认都自适应自身内容，仅Block5按需填充剩余空间

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