Ask any question about Tailwind CSS here... and get an instant response.

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.

✅ Answered with Tailwind CSS best practices.

Ask any question about Tailwind CSS here... and get an instant response.

How can I create equal height cards in a grid using Tailwind CSS?

Asked on Sep 07, 2025

Answer

The Q&A Network