Responsive card grid in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a responsive grid container using Tailwind CSS.

Tailwind

<div class="grid [1] gap-4">
  <!-- Cards go here -->
</div>

Drag options to blanks, or click blank then click option'

Ablock

Bflex

Cgrid-cols-3

Dinline-grid

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex instead of grid classes.

Using block which does not create a grid.

Using inline-grid which is less common for this layout.

The class grid-cols-3 sets the grid to have 3 columns, making it a responsive grid container.

2fill in blank

medium

Complete the code to make the grid responsive with 1 column on small screens and 3 columns on medium screens.

Tailwind

<div class="grid [1] md:grid-cols-3 gap-4">
  <!-- Cards go here -->
</div>

Drag options to blanks, or click blank then click option'

Agrid-cols

Bgrid-cols-1

Cgrid

Dcols

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-cols which is incomplete without specifying the number of columns.

Using cols which is not a Tailwind class.

Using grid which duplicates the existing grid class.

The class grid-cols-1 sets 1 column on small screens, while md:grid-cols-3 sets 3 columns on medium screens and larger, creating a responsive grid.

3fill in blank

hard

Fix the error in the card class to add padding using Tailwind CSS.

Tailwind

<div class="bg-white rounded shadow [1]">
  <h2 class="text-lg font-bold">Card Title</h2>
  <p>Card content goes here.</p>
</div>

Drag options to blanks, or click blank then click option'

Ap-4

Bpadding-4

Cpad-4

Dp4

Attempts:

3 left

💡 Hint

Common Mistakes

Using padding-4 which is not a Tailwind class.

Using pad-4 which is invalid.

Using p4 missing the dash.

The correct Tailwind class for padding is p-4. Other options are invalid or incorrect.

4fill in blank

hard

Fill both blanks to create a responsive card grid with 2 columns on small screens and 4 columns on large screens.

Tailwind

<div class="grid [1] lg:[2] gap-6">
  <!-- Cards go here -->
</div>

Drag options to blanks, or click blank then click option'

Agrid-cols-2

Bgrid-cols-3

Cgrid-cols-4

Dgrid-cols-1

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same number of columns for both screen sizes.

Using invalid Tailwind classes.

Forgetting the responsive prefix lg:.

Use grid-cols-2 for small screens and lg:grid-cols-4 for large screens to create a responsive grid.

5fill in blank

hard

Fill all three blanks to create a card with a shadow, rounded corners, and hover effect that changes background color.

Tailwind

<div class="bg-white [1] [2] hover:[3] transition-colors duration-300">
  <h3 class="text-xl font-semibold">Card Title</h3>
  <p>Card description text.</p>
</div>

Drag options to blanks, or click blank then click option'

Ashadow-lg

Brounded-md

Cbg-gray-100

Dp-6

Attempts:

3 left

💡 Hint

Common Mistakes

Using padding class instead of shadow or rounded classes.

Forgetting the hover prefix for background color.

Using invalid Tailwind class names.

The class shadow-lg adds a large shadow, rounded-md adds medium rounded corners, and hover:bg-gray-100 changes background color on hover.

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