如何在顺风中保持单个网格列的高度

Question

在下面的例子中（看这里的顺风游戏：https://play.tailwindcss.com/wUWT1PCfEU），如果第一个<details>打开，其他列的高度将随之增加。

<div class="grid grid-cols-1 sm:grid-cols-3">
  <div class="bg-gray-400">
    <details>
      <summary>aaaa</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dui vitae nunc porta finibus eu ut turpis. Donec rhoncus, mauris at fringilla ullamcorper, nibh lacus laoreet sapien, non viverra lectus diam non dolor.
    </details>
  </div>
  <div class="bg-green-400">
    <details>
      <summary>bbbb</summary>
      A small text
    </details>
  </div>
  <div class="bg-purple-400">
    <details>
      <summary>cccc</summary>
      A medium text
    </details>
  </div>
</div>

如何避免这种情况，每列都有单独的高度？

Answer 1

您可以使用 tailwind flex 来实现它。考虑下面的代码片段：

<div class="flex w-full">
  <div class="bg-gray-400 w-4/12 h-full">
    <details>
      <summary>aaaa</summary>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dui vitae nunc porta finibus eu ut turpis. Donec rhoncus, mauris at fringilla ullamcorper, nibh lacus laoreet sapien, non viverra lectus diam non dolor.
    </details>
  </div>
  <div class="bg-green-400 w-4/12 h-full">
    <details>
      <summary>bbbb</summary>
      A small text
    </details>
  </div>
  <div class="bg-purple-400 w-4/12 h-full">
    <details>
      <summary>cccc</summary>
      A medium text
    </details>
  </div>
</div>

Working Example

如何在顺风中保持单个网格列的高度

How to keep individual grid column height in tailwind

css

tailwind-css