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.