Sign in Get started

Tailwind CSS cookbook · Beginner

Create a responsive card grid

Display products or articles in a grid that shows one column on phones and more on larger screens, with equal-height cards.

Create a free account to save this page, take notes and track your progress. Sign in

Approach

Use CSS grid with breakpoint columns (sm:grid-cols-2 lg:grid-cols-3) or an auto-fill track for a grid that needs no breakpoints. Make each card a flex column so buttons line up at the bottom.

Solution

Create a responsive card gridTry it yourself
<div class="grid gap-6 bg-gray-50 p-6 sm:grid-cols-2 lg:grid-cols-3">
  <article class="flex flex-col overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-gray-200">
    <div class="h-28 bg-linear-to-br from-sky-400 to-indigo-500"></div>
    <div class="flex flex-1 flex-col p-4">
      <h3 class="font-semibold">Getting started</h3>
      <p class="mt-1 flex-1 text-sm text-gray-600">A short description.</p>
      <a href="#" class="mt-4 text-sm font-semibold text-indigo-600">Read more →</a>
    </div>
  </article>
  <article class="flex flex-col overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-gray-200">
    <div class="h-28 bg-linear-to-br from-emerald-400 to-teal-600"></div>
    <div class="flex flex-1 flex-col p-4">
      <h3 class="font-semibold">Responsive layouts</h3>
      <p class="mt-1 flex-1 text-sm text-gray-600">This card has a much longer description, yet its link still lines up with the others.</p>
      <a href="#" class="mt-4 text-sm font-semibold text-indigo-600">Read more →</a>
    </div>
  </article>
  <article class="flex flex-col overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-gray-200">
    <div class="h-28 bg-linear-to-br from-amber-400 to-rose-500"></div>
    <div class="flex flex-1 flex-col p-4">
      <h3 class="font-semibold">Dark mode</h3>
      <p class="mt-1 flex-1 text-sm text-gray-600">Short.</p>
      <a href="#" class="mt-4 text-sm font-semibold text-indigo-600">Read more →</a>
    </div>
  </article>
</div>

Pitfalls

  • Uneven card heights: without flex flex-col and flex-1 on the text, buttons don't align.
  • Images with different aspect ratios; fix them with aspect-video object-cover.

Variations

  • grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] for a grid without breakpoints.
  • Use container queries (@container) when the grid sits in panels of different widths.

Further reading: Tailwind CSS docs

Reference: https://tailwindcss.com/docs/grid-template-columns

More Tailwind CSS recipes

Was this page helpful?