如何在Tailwind CSS的3列网格中为各元素设置不同高度？

问题出在你给网格容器加了grid-rows-2类——这个类会强制网格的两行拥有相同的固定高度，导致你给单个元素设置的高度被网格行的高度覆盖，看起来所有元素都继承了同一高度。

解决方法很简单：移除grid-rows-2，让网格自动根据内容生成行高。修改后的代码如下：

<div class="grid grid-cols-3 gap-2">
  <div class="bg-green-200 col-span-full h-auto">Box1</div>
  <div class="bg-white rounded-md shadow-sm h-[40px]">Box2</div>
  <div class="bg-white rounded-md shadow-sm h-auto">Box3</div>
  <div class="bg-white rounded-md shadow-sm h-[250px]">Box4</div>
</div>

这样调整后，每个网格元素的高度设置就能正常生效：

• Box1 用h-auto，高度由自身内容决定
• Box2 固定为h-[40px]
• Box3 用h-auto，高度由自身内容决定
• Box4 固定为h-[250px]

如果之后需要对行高有更基础的控制，也可以用grid-auto-rows相关类（比如grid-auto-rows-min）来设置默认行高，但当前场景下移除固定行数的类就完全能满足需求。

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