TailwindCSS - Set all grid items to be the same height

user_16957052 0
Viewed 875

I wanted to create grid with Tailwind CSS where all items have the same height.

But when children have different content length, their background color is not filling whole cell:

screenshot

Grid markup:

<div class="grid grid-cols-2 gap-4 auto-rows-max">{ITEMS}</div>

Item markup:

<div class="rounded-md overflow-hidden ring-1 ring-blue-600 ring-opacity-20">
  <div class="bg-red-200 p-6 flex flex-col justify-between ">{BODY}</div>
</div>

I thought that auto-rows-max was the solution but it's not working.

Interactive example: https://play.tailwindcss.com/dlgGmz41dA

css-grid tailwind-css css html
1 Answers

You are applying the background color one tag too late. Just move bg-red-200 up to the div with rounded-md overflow-hidden... and each grid cell will have full color backgrounds regardless of content length.

Item markup:

<div class="bg-red-200 rounded-md overflow-hidden ring-1 ring-blue-600 ring-opacity-20">
  <div class="p-6 flex flex-col justify-between ">
   ...
  </div>
</div>

And on Tailwind Play https://play.tailwindcss.com/Lf7nF97Be1

user_76579150
Related