TailwindCSS网格列自动高度失效问题咨询

这是CSS Grid布局的默认行为导致的：Grid容器默认设置了align-items: stretch，会强制同一行内的所有网格项高度拉伸匹配该行最高的元素，所以你加的h-auto或者height: auto!important都无法覆盖这个布局规则。

要让网格列高度基于自身内容而非最高列，有两种简单的解决方式：

方式1：给网格容器添加items-start类 #

这个类对应CSS的align-items: start，会让所有网格项在垂直方向从顶部开始排列，高度完全由自身内容决定：

<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-3 gap-4 items-start">
    <div class="bg-blue-100">test</div>
    <div class="bg-blue-100">test</div>
    <div class="bg-blue-100">test<br />test</div>
</div>

方式2：给单个网格项添加self-start类 #

如果只想让部分网格项高度随内容，其他保持拉伸状态，可以给目标项单独加self-start（对应CSS的align-self: start）：

<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-3 gap-4">
    <div class="bg-blue-100 self-start">test</div>
    <div class="bg-blue-100 self-start">test</div>
    <div class="bg-blue-100">test<br />test</div>
</div>

本质上，h-auto不生效是因为Grid的拉伸规则优先级更高，直接修改布局对齐方式才是从根源解决问题的方法。

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