Responsive card grid in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

Responsive grid columns with Tailwind CSS

Given this Tailwind CSS grid container, how many columns will be shown on a medium screen (min-width 768px)?

Tailwind

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

A 1 column

B 2 columns

C 3 columns

D 4 columns

💡 Hint

Look at the class that starts with md: for medium screens.

The class md:grid-cols-4 sets the grid to 4 columns on medium screens and larger.

Before medium screens, smaller breakpoints apply.

❓ selector

intermediate

Tailwind CSS class for spacing between grid items

Which Tailwind CSS class adds consistent spacing between grid items in a card grid?

A gap-4

B space-x-4

C p-4

D m-4

💡 Hint

This class controls gaps between rows and columns in grids.

gap-4 adds equal spacing between grid rows and columns.

space-x-4 only adds horizontal spacing between flex items.

❓ rendering

advanced

Visual result of grid with fixed columns and gap

What will the user see when this Tailwind CSS code runs in a browser on a large screen?

Tailwind

<div class="grid grid-cols-3 gap-6 p-4">
  <div class="bg-blue-500 text-white p-6 rounded">Card 1</div>
  <div class="bg-blue-500 text-white p-6 rounded">Card 2</div>
  <div class="bg-blue-500 text-white p-6 rounded">Card 3</div>
  <div class="bg-blue-500 text-white p-6 rounded">Card 4</div>
</div>

A Four cards arranged in 2 columns with large spacing

B Four cards arranged in 4 columns with no spacing

C Four cards arranged in 3 columns with spacing between them

D Four cards stacked vertically with no spacing

💡 Hint

Check the grid-cols and gap classes for layout and spacing.

The container uses grid-cols-3 so there are 3 columns.

There are 4 cards, so the last card wraps to the next row.

gap-6 adds spacing between cards.

❓ accessibility

advanced

Improving accessibility in a responsive card grid

Which addition improves keyboard navigation and screen reader accessibility for a card grid?

Tailwind

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5">
  <article class="bg-white p-4 rounded shadow">Card content</article>
  <article class="bg-white p-4 rounded shadow">Card content</article>
  <article class="bg-white p-4 rounded shadow">Card content</article>
</div>

A Add aria-hidden="true" to all cards to hide them from screen readers

B Add tabindex="0" to each <article> to make cards focusable

C Add role="button" to the grid container <div>

D Add alt="card image" to the <article> elements

💡 Hint

Think about how keyboard users can focus on cards.

Adding tabindex="0" makes each card focusable by keyboard.

role="button" is incorrect because the container is not a button.

aria-hidden="true" hides content from screen readers, which is bad here.

alt attribute applies only to images, not article.

🧠 Conceptual

expert

Responsive behavior of grid with minmax and auto-fit

What is the effect of this Tailwind CSS custom grid class on different screen sizes?

...

A Grid creates as many columns as fit with minimum width 12rem, expanding to fill space

B Grid always has exactly 12 columns each 1fr wide

C Grid has fixed 1 column with width 12rem and no responsiveness

D Grid columns shrink below 12rem when screen is narrow

💡 Hint

Understand CSS grid repeat(auto-fit, minmax()) behavior.

repeat(auto-fit, minmax(12rem, 1fr)) creates as many columns as fit in the container.

Each column is at least 12rem wide and can grow to fill available space.

This makes the grid responsive, adjusting columns based on screen width.

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