What is Responsive card grid in Tailwind?

Responsive card grid in Tailwind - Syntax, Examples & Explanation

Introduction

A responsive card grid helps show multiple items neatly on any screen size. It adjusts automatically so cards look good on phones, tablets, and desktops.

Displaying product cards on an online store page

Showing team member profiles on a company website

Listing blog post previews on a homepage

Presenting photo galleries that adapt to screen size

Syntax

Tailwind

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  <!-- Card items here -->
</div>

grid-cols-* sets how many columns the grid has.

Use responsive prefixes like sm:, md:, lg: to change columns on different screen sizes.

Examples

Shows 1 column on small screens, 2 columns on medium and up.

Tailwind

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
  <!-- Cards -->
</div>

Starts with 1 column on small screens, switches to 3 columns on medium screens and larger.

Tailwind

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  <!-- Cards -->
</div>

Uses 2 columns normally, expands to 5 columns on large screens.

Tailwind

<div class="grid grid-cols-2 lg:grid-cols-5 gap-2">
  <!-- Cards -->
</div>

Sample Program

This example creates a grid of cards that changes columns based on screen size. On small phones, it shows 1 card per row. On small tablets, 2 cards per row. On medium screens, 3 cards. On large screens, 4 cards per row. Each card has a white background, rounded corners, shadow, and some padding for neat spacing.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Responsive Card Grid</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-6">
  <main class="max-w-7xl mx-auto">
    <h1 class="text-2xl font-bold mb-6">Responsive Card Grid</h1>
    <section class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <article class="bg-white rounded-lg shadow p-4">
        <h2 class="font-semibold text-lg mb-2">Card 1</h2>
        <p class="text-gray-600">This is the first card.</p>
      </article>
      <article class="bg-white rounded-lg shadow p-4">
        <h2 class="font-semibold text-lg mb-2">Card 2</h2>
        <p class="text-gray-600">This is the second card.</p>
      </article>
      <article class="bg-white rounded-lg shadow p-4">
        <h2 class="font-semibold text-lg mb-2">Card 3</h2>
        <p class="text-gray-600">This is the third card.</p>
      </article>
      <article class="bg-white rounded-lg shadow p-4">
        <h2 class="font-semibold text-lg mb-2">Card 4</h2>
        <p class="text-gray-600">This is the fourth card.</p>
      </article>
      <article class="bg-white rounded-lg shadow p-4">
        <h2 class="font-semibold text-lg mb-2">Card 5</h2>
        <p class="text-gray-600">This is the fifth card.</p>
      </article>
      <article class="bg-white rounded-lg shadow p-4">
        <h2 class="font-semibold text-lg mb-2">Card 6</h2>
        <p class="text-gray-600">This is the sixth card.</p>
      </article>
    </section>
  </main>
</body>
</html>

OutputSuccess

Important Notes

Use gap-* classes to add space between cards.

Cards should have padding and shadows for better look and separation.

Test your grid by resizing the browser or using device simulation in DevTools.

Summary

A responsive card grid adjusts the number of columns based on screen size.

Tailwind's grid and responsive prefixes make it easy to build these grids.

Adding gap, padding, and shadows improves the visual layout and readability.