How can I create equal height cards in a grid using Tailwind CSS?
Asked on Sep 07, 2025
Answer
To create equal height cards in a grid using Tailwind CSS, you can utilize the flexbox utilities to ensure that each card stretches to the same height. This is achieved by setting the container to display as a grid and using flex utilities on the card elements.
<!-- BEGIN COPY / PASTE -->
<div class="grid grid-cols-3 gap-4">
<div class="flex flex-col bg-white p-4 shadow-md">
<h2 class="text-lg font-bold">Card Title</h2>
<p class="flex-grow">Card content goes here. This card will stretch to match the height of others.</p>
<button class="mt-2 bg-blue-500 text-white py-1 px-4 rounded">Action</button>
</div>
<div class="flex flex-col bg-white p-4 shadow-md">
<h2 class="text-lg font-bold">Card Title</h2>
<p class="flex-grow">Another card with different content length.</p>
<button class="mt-2 bg-blue-500 text-white py-1 px-4 rounded">Action</button>
</div>
<div class="flex flex-col bg-white p-4 shadow-md">
<h2 class="text-lg font-bold">Card Title</h2>
<p class="flex-grow">Short content.</p>
<button class="mt-2 bg-blue-500 text-white py-1 px-4 rounded">Action</button>
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
- Use "grid grid-cols-3" to create a three-column grid layout.
- The "flex flex-col" class on each card ensures they use flexbox with column direction.
- "flex-grow" on the paragraph element allows it to take up available space, ensuring equal height.
- Adjust the number of columns in "grid-cols-3" to fit your design needs.
Recommended Links: