CODEWITHSUNDEEP
csstailwind-css
Bruno Tomé
Bruno Tomé

Reputation: 570

How to keep individual grid column height in tailwind

In the below example (see the tailwind play here: https://play.tailwindcss.com/wUWT1PCfEU), if the first <details> is open, the height of the other columns will increase with it.

<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>

How can this be prevent and each column has individual height?

Upvotes: 4

Views: 7023

Answers (1)

zafer onay
zafer onay

Reputation: 1783

You can achieve it with tailwind flex. Consider the code snippet below:

<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

Upvotes: 4

Related Questions