TailwindCSS：网格列自动高度

Question

我想知道为什么网格列的自动高度在 tailwindcss 中不起作用：

<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-3 gap-4">
    <div class="bg-blue-100" style="height: auto!important">test</div>
    <div class="bg-blue-100 h-auto">test</div>
    <div class="bg-blue-100">test<br />test</div>
</div>

如果我设置

h-xxx

，但我想要自动高度，它会起作用。所有列的高度都应基于其内容而不是最高的列。

Answer 1

align-items 的默认值为

normal

，其作用类似于网格容器中的拉伸。您需要设置

align-items:base-line

。 （

items-baseline

顺风。）

至于为什么

height:auto

不起作用，当设置

align-items:stretch

时，每个项目的行为如

justify-self:stretch

所定义。因此，根据 spec

当框的计算宽度/高度（根据轴的情况）为自动并且其边距（在相应的轴中）都不是自动时，将框的使用大小设置为使其外部大小尽可能接近所需的长度尽可能填充对齐容器，同时仍然遵守最小高度/最小宽度/最大高度/最大宽度施加的约束。

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