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.

Practice

1. What does the Tailwind class gap-4 do in a grid layout?

easy

A. Removes all space between grid cells

B. Adds space only between rows in the grid

C. Adds space only between columns in the grid

D. Adds equal space between all grid cells horizontally and vertically

Solution

1. Step 1: Understand the gap-4 class

   The gap-4 class in Tailwind adds spacing between grid cells both horizontally and vertically.

2. Step 2: Compare with other gap classes

   Classes like gap-x-4 or gap-y-4 add space only horizontally or vertically, but gap-4 applies to both directions equally.

3. Final Answer:

   Adds equal space between all grid cells horizontally and vertically -> Option D

4. Quick Check:

   gap-4 = equal horizontal and vertical gap [OK]

Hint: gap-{size} sets equal space in all directions [OK]

Common Mistakes:

• Confusing gap-4 with gap-x-4 or gap-y-4
• Thinking gap-4 removes space
• Assuming gap-4 affects only rows or columns

2. Which Tailwind class correctly adds horizontal gap of 6 and vertical gap of 2 between grid cells?

easy

A. gap-x-6 gap-y-2

B. gap-6 gap-2

C. gap-x-6 gap-2

D. gap-y-6 gap-x-2

Solution

1. Step 1: Identify horizontal and vertical gap classes

   In Tailwind, gap-x-{size} sets horizontal gap and gap-y-{size} sets vertical gap.

2. Step 2: Match sizes to directions

   We want horizontal gap 6 and vertical gap 2, so gap-x-6 gap-y-2 is correct.

3. Final Answer:

   gap-x-6 gap-y-2 -> Option A

4. Quick Check:

   gap-x-6 gap-y-2 = horizontal 6, vertical 2 [OK]

Hint: Use gap-x for horizontal, gap-y for vertical gaps [OK]

Common Mistakes:

• Using gap-6 gap-2 which overrides each other
• Swapping gap-x and gap-y sizes
• Using only gap without direction for different sizes

3. Given this HTML snippet:

<div class="grid grid-cols-3 gap-3">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

What visual effect will gap-3 have on the grid cells?

medium

A. No space between grid cells

B. Adds moderate space between all grid cells horizontally and vertically

C. Adds space only between rows

D. Adds space only between columns

Solution

1. Step 1: Understand the grid setup

   The grid has 3 columns and uses gap-3 which adds spacing between all cells horizontally and vertically.

2. Step 2: Visualize the effect of gap-3

   Each cell will have moderate space around it, improving readability and separation.

3. Final Answer:

   Adds moderate space between all grid cells horizontally and vertically -> Option B

4. Quick Check:

   gap-3 = moderate equal gaps [OK]

Hint: gap-3 means moderate space all around grid cells [OK]

Common Mistakes:

• Thinking gap-3 adds no space
• Confusing gap-3 with gap-x-3 or gap-y-3
• Assuming gap-3 affects only rows or columns

4. You want to add horizontal gap 4 and vertical gap 8 between grid cells, but your code uses gap-4 gap-y-8. What is wrong?

medium

A. Both gaps work correctly as intended

B. gap-4 overrides gap-y-8, so vertical gap stays 4

C. gap-y-8 overrides gap-4, so horizontal gap stays 8

D. This syntax causes a syntax error

Solution

1. Step 1: Understand the class application order

   The gap-4 class sets both horizontal and vertical gaps to 1rem. The following gap-y-8 class overrides only the vertical gap to 2rem, leaving the horizontal gap at 1rem.

2. Step 2: Verify against desired outcome

   This results in horizontal gap of 4 and vertical gap of 8, exactly as intended.

3. Final Answer:

   Both gaps work correctly as intended -> Option A

4. Quick Check:

   gap-4 gap-y-8 = x:4 y:8 [OK]

Hint: gap-{size} followed by gap-x/y-{size2} correctly sets directional gaps [OK]

Common Mistakes:

• Thinking gap-4 overrides the subsequent gap-y-8
• Assuming the gaps add together
• Believing this causes a syntax error

5. You have a grid with 4 columns and want to add 1rem horizontal gap and 0.5rem vertical gap between cells. Which Tailwind classes achieve this correctly?

hard

A. gap-x-2 gap-y-4

B. gap-4 gap-2

C. gap-x-4 gap-y-2

D. gap-1 gap-y-0.5

Solution

1. Step 1: Convert rem values to Tailwind spacing scale

   Tailwind spacing scale: 1rem = 4, 0.5rem = 2. So horizontal gap 1rem = gap-x-4, vertical gap 0.5rem = gap-y-2.

2. Step 2: Choose correct classes for horizontal and vertical gaps

   Use gap-x-4 for horizontal and gap-y-2 for vertical gaps to set different sizes.

3. Final Answer:

   gap-x-4 gap-y-2 -> Option C

4. Quick Check:

   1rem horizontal = gap-x-4, 0.5rem vertical = gap-y-2 [OK]

Hint: Match rem to Tailwind scale: 1rem=4, 0.5rem=2 [OK]

Common Mistakes:

• Using gap-4 gap-2 which overrides gaps
• Swapping horizontal and vertical gap sizes
• Using invalid fractional gap classes