Responsive card grid in Tailwind

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>

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.

Practice

1. What does a responsive card grid do in a web page layout?

easy

A. It only works on desktop screens.

B. It fixes the number of columns regardless of screen size.

C. It hides cards on smaller screens.

D. It changes the number of columns based on screen size.

Solution

1. Step 1: Understand responsive design

   Responsive design means the layout adapts to different screen sizes.

2. Step 2: Role of a responsive card grid

   A responsive card grid changes how many columns show depending on screen width, so cards fit nicely on all devices.

3. Final Answer:

   It changes the number of columns based on screen size. -> Option D

4. Quick Check:

   Responsive grid = column count changes [OK]

Hint: Responsive means layout adapts to screen size [OK]

Common Mistakes:

• Thinking columns stay fixed on all screens
• Assuming cards get hidden instead of rearranged
• Believing responsiveness only applies to desktops

2. Which Tailwind class correctly sets a grid with 1 column by default and 3 columns on medium screens and above?

easy

A. grid grid-cols-3 md:grid-cols-3

B. grid-cols-3 md:grid-cols-1

C. grid grid-cols-1 md:grid-cols-3

D. grid md:grid-cols-3 grid-cols-3

Solution

1. Step 1: Understand Tailwind responsive prefixes

   Classes prefixed with md: apply at medium screen sizes and larger.

2. Step 2: Set default and medium screen columns

   Default is 1 column (grid-cols-1), and medium screens get 3 columns (md:grid-cols-3).

3. Final Answer:

   grid grid-cols-1 md:grid-cols-3 -> Option C

4. Quick Check:

   Default 1 col, md+ 3 cols = grid grid-cols-1 md:grid-cols-3 [OK]

Hint: Use mobile-first: default then md: for medium screens [OK]

Common Mistakes:

• Putting grid-cols-3 before md: prefix incorrectly
• Missing the base grid class
• Reversing default and md: column counts

3. Given this Tailwind code snippet, how many columns will display on a large screen?

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">...</div>

medium

A. 4 columns

B. 2 columns

C. 3 columns

D. 1 column

Solution

1. Step 1: Identify screen size breakpoints

   Tailwind applies classes from smallest to largest: default, sm, md, lg.

2. Step 2: Check lg:grid-cols-4 on large screens

   On large screens, the lg:grid-cols-4 class sets 4 columns.

3. Final Answer:

   4 columns -> Option A

4. Quick Check:

   Large screen uses lg: prefix = 4 columns [OK]

Hint: Largest breakpoint prefix overrides smaller ones [OK]

Common Mistakes:

• Choosing default or smaller breakpoint columns
• Ignoring the lg: prefix effect
• Confusing gap with columns

4. What is wrong with this Tailwind grid code if the cards do not space out properly?

<div class="grid grid-cols-3 gap-2 p-4">...</div>

medium

A. Using gap-2 instead of gap-4 causes no spacing.

B. Missing responsive prefixes for different screen sizes.

C. Padding p-4 should be on each card, not the grid container.

D. grid-cols-3 is invalid without grid-rows.

Solution

1. Step 1: Check responsiveness

   The code sets 3 columns always, no responsive changes for smaller screens.

2. Step 2: Effect on spacing and layout

   Without responsive prefixes, cards may look cramped on small screens because columns don't adjust.

3. Final Answer:

   Missing responsive prefixes for different screen sizes. -> Option B

4. Quick Check:

   Responsive prefixes needed for proper spacing [OK]

Hint: Add responsive prefixes to adjust columns on all screens [OK]

Common Mistakes:

• Thinking gap-2 means no spacing
• Believing padding must be on cards only
• Assuming grid-rows is required with grid-cols

5. You want a responsive card grid that shows 1 column on small screens, 2 columns on medium, and 4 columns on large screens, with consistent spacing and shadow on each card. Which Tailwind setup is correct?

hard

A. Card

B. Card

C. Card

D. Card

Solution

1. Step 1: Check column counts and breakpoints

   Card

   uses mobile-first: 1 column default, 2 at md, 4 at lg, matching requirements.

2. Step 2: Verify spacing and shadow

   Card
   uses gap-6 for consistent spacing and shadow with padding on cards, which is correct.

3. Final Answer:

   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 p-4"> <div class="shadow p-4">Card</div> </div> -> Option A

4. Quick Check:

   Correct breakpoints and spacing =
   Card
   [OK]

Hint: Mobile-first columns then md: and lg: prefixes for responsiveness [OK]

Common Mistakes:

• Reversing breakpoint order
• Using inconsistent gap or padding
• Missing shadow or applying it incorrectly