My goal was to design a grid using Tailwind CSS where all items would have equal height.
However, I encountered an issue when the children had varying content lengths, causing their background color not to fill the entire cell:
https://i.sstatic.net/nyfXj.png
This is the grid markup I used:
<div class="grid grid-cols-2 gap-4 auto-rows-max">{ITEMS}</div>
And here's the markup for the individual item:
<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 initially believed that using auto-rows-max would solve the problem, but it did not work as expected.
You can view an interactive example here: https://play.tailwindcss.com/dlgGmz41dA