如何使用 CSS Grid 在跨越多行的列上设置不确定的高度？

Question

我正在使用 Tailwind CSS 并尝试使用如下所示的网格布局：

我在 Div 1 中有一些仪表板类型的指标。现在，当我向 Div 2 添加一个很长的有序列表时，出于某种原因，它将 Div 1 的高度拉伸到（在我看来）是 Div 2 的整体高度.

希望这张截图能清楚地说明发生了什么。将内容添加到右侧 Div 列后，您可以看到顶部 Div（Div 1）的高度非常大：

我使用的代码基本上是直接从 Tailwind Grid 生成器复制/粘贴，如下所示：

<div class="grid grid-cols-3 grid-rows-4 gap-4">
    <div class="col-span-3">1</div>
    <div class="row-span-3 col-start-3 row-start-2">2</div>
    <div class="col-start-1 row-start-2">3</div>
    <div class="col-start-2 row-start-2">4</div>
    <div class="col-span-2">5</div>
    <div class="col-span-2 row-start-4">6</div>
</div>

我只是将我自己的内容放在各自的 Div 中，但它的行为出乎意料。

我的目标是基本上让网格中的所有 Div 的高度与其各自 Div 中的内容一样大。

编辑：类似于这支笔的工作方式。虽然笔使用自定义 css 样式。理想情况下，我想使用 Tailwind CSS 类来实现相同的结果。

https://codepen.io/source-matters/pen/YzJaBRL?editors=1100

Answer 1

您看到的行为是因为您通过

grid-template-columns: repeat(4, 1fr)

应用了

grid-rows-4

。这指示每个轨道的布局应为高度的 ¼。因此，如果最后三行轨道因内容而高，这将拉长第一行轨道，使其符合 ¼ 高度规定。相反，您可以考虑告诉布局，第一行轨道应该 not 根本不是总高度的一小部分：

<script src="https://cdn.tailwindcss.com"></script>

<div class="grid grid-cols-3 grid-rows-[auto_repeat(3,1fr)] gap-4">
    <div class="col-span-3 bg-red-200">1</div>
    <div class="row-span-3 col-start-3 row-start-2 bg-green-200">
      <div class="h-96">Foo</div>
    </div>
    <div class="col-start-1 row-start-2 bg-yellow-200">3</div>
    <div class="col-start-2 row-start-2 bg-violet-200">4</div>
    <div class="col-span-2 bg-blue-200">5</div>
    <div class="col-span-2 row-start-4 bg-sky-200">6</div>
</div>