Gap between grid cells in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a gap between grid cells using Tailwind CSS.

Tailwind

<div class="grid grid-cols-3 [1]">
  <div class="bg-blue-500 p-4">Cell 1</div>
  <div class="bg-green-500 p-4">Cell 2</div>
  <div class="bg-red-500 p-4">Cell 3</div>
</div>

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

Agap-4

Bspace-x-4

Cm-4

Dp-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using padding 'p-4' on the container instead of gap.

Using margin 'm-4' which adds space outside the grid container.

Using 'space-x-4' which only adds horizontal space between flex items.

The Tailwind class 'gap-4' adds a consistent gap between grid cells.

2fill in blank

medium

Complete the code to add a vertical gap between grid rows only.

Tailwind

<div class="grid grid-cols-2 [1]">
  <div class="bg-yellow-400 p-3">Row 1, Cell 1</div>
  <div class="bg-yellow-600 p-3">Row 1, Cell 2</div>
  <div class="bg-yellow-800 p-3">Row 2, Cell 1</div>
  <div class="bg-yellow-900 p-3">Row 2, Cell 2</div>
</div>

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

Agap-y-6

Bgap-6

Cgap-x-6

Dspace-y-6

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'gap-x-6' which adds horizontal gaps instead of vertical.

Using 'gap-6' which adds gaps both horizontally and vertically.

Using 'space-y-6' which works only with flexbox, not grid.

The class 'gap-y-6' adds vertical gaps between grid rows only.

3fill in blank

hard

Fix the error in the code to correctly add a 2rem gap between grid cells.

Tailwind

<div class="grid grid-cols-4 [1]">
  <div class="bg-purple-400 p-2">Item 1</div>
  <div class="bg-purple-600 p-2">Item 2</div>
  <div class="bg-purple-800 p-2">Item 3</div>
  <div class="bg-purple-900 p-2">Item 4</div>
</div>

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

Agap-2rem

Bgap-8

Cgap-2

Dgap-16

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'gap-2rem' which is not a valid Tailwind class.

Using 'gap-2' which equals 0.5rem, smaller than 2rem.

Using 'gap-16' which equals 4rem, larger than needed.

Tailwind's 'gap-8' class corresponds to 2rem gap size. 'gap-2rem' is invalid.

4fill in blank

hard

Fill both blanks to create a grid with 3 columns and a 1.5rem gap between cells.

Tailwind

<div class="grid [1] [2]">
  <div class="bg-pink-400 p-3">Box 1</div>
  <div class="bg-pink-600 p-3">Box 2</div>
  <div class="bg-pink-800 p-3">Box 3</div>
  <div class="bg-pink-900 p-3">Box 4</div>
</div>

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

Agrid-cols-3

Bgap-6

Cgap-4

Dgrid-cols-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'grid-cols-4' which creates 4 columns instead of 3.

Using 'gap-4' which equals 1rem, smaller than 1.5rem gap.

'grid-cols-3' sets 3 columns, 'gap-6' sets 1.5rem gap in Tailwind.

5fill in blank

hard

Fill all three blanks to create a responsive grid with 2 columns on small screens, 4 columns on large screens, and a 1rem gap.

Tailwind

<div class="grid [1] [2] [3]">
  <div class="bg-teal-400 p-2">Item A</div>
  <div class="bg-teal-600 p-2">Item B</div>
  <div class="bg-teal-800 p-2">Item C</div>
  <div class="bg-teal-900 p-2">Item D</div>
  <div class="bg-teal-700 p-2">Item E</div>
  <div class="bg-teal-500 p-2">Item F</div>
</div>

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

Agrid-cols-2

Bgap-4

Clg:grid-cols-4

Dgap-6

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'gap-6' which is 1.5rem instead of 1rem gap.

Not adding responsive prefix 'lg:' for large screen columns.

Using 'grid-cols-4' without responsive prefix, making 4 columns on all screens.

Use 'grid-cols-2' for small screens, 'lg:grid-cols-4' for large screens, and 'gap-4' for 1rem gap.