Responsive card grid in Tailwind - Mini Project: Build & Apply

Responsive Card Grid

📖 Scenario: You are building a simple webpage to display a set of product cards. Each card shows a product name and a short description. The cards should arrange themselves nicely in a grid that changes layout depending on the screen size.

🎯 Goal: Create a responsive card grid using Tailwind CSS. The grid should show one column on small screens, two columns on medium screens, and three columns on large screens. Each card should have a border, some padding, and a subtle shadow.

📋 What You'll Learn

Use a container <main> element with Tailwind classes for padding and max width.

Create a grid container with Tailwind classes that changes columns responsively: 1 column on small, 2 on medium, 3 on large screens.

Each card should be a <section> with a border, padding, rounded corners, and shadow using Tailwind classes.

Inside each card, include a <h2> for the product name and a <p> for the description.

Ensure the page uses semantic HTML and is accessible.

💡 Why This Matters

🌍 Real World

Responsive card grids are common in online stores, portfolios, and dashboards to display items neatly on all devices.

💼 Career

Knowing how to build responsive, accessible layouts with Tailwind CSS is valuable for front-end web development roles.

1

Create the HTML skeleton with product data

Create a <main> element with Tailwind classes max-w-4xl mx-auto p-4. Inside it, create a <section> with the class grid. Inside the grid, add three <section> cards each with a <h2> and <p> for these products:
1. Name: Camera, Description: High quality digital camera
2. Name: Headphones, Description: Noise cancelling headphones
3. Name: Smartwatch, Description: Track your fitness and notifications

Tailwind

Hint

Start by creating the main container with padding and max width. Then add a grid container and three cards with the exact product names and descriptions.

2

Add responsive grid columns

Add Tailwind classes to the grid <section> to make it have 1 column on small screens, 2 columns on medium screens, and 3 columns on large screens. Use the classes grid-cols-1 md:grid-cols-2 lg:grid-cols-3.

Tailwind

Hint

Add the responsive grid column classes to the grid container to control how many columns show on different screen sizes.

3

Style each card with border, padding, rounded corners, and shadow

Add Tailwind classes border p-4 rounded shadow to each product card <section> inside the grid to give them a border, padding, rounded corners, and a subtle shadow.

Tailwind

Hint

Add the styling classes to each card section to make them visually distinct and nicely spaced.

4

Add accessibility and semantic improvements

Add aria-label="Product card for Camera", aria-label="Product card for Headphones", and aria-label="Product card for Smartwatch" respectively to each product card <section>. Also, add tabindex="0" to each card to make them keyboard focusable.

Tailwind

Hint

Add aria-labels to describe each card for screen readers and tabindex="0" to make cards focusable by keyboard.

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