Grid container activation in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to activate a grid container using Tailwind CSS.

Tailwind

<div class="[1] gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

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

Aflex

Bblock

Cinline

Dgrid

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flex' instead of 'grid' activates flexbox, not grid.

Using 'block' or 'inline' does not create a grid container.

Using grid activates the grid container in Tailwind CSS, enabling grid layout.

2fill in blank

medium

Complete the code to create a grid container with 3 columns using Tailwind CSS.

Tailwind

<div class="grid [1] gap-2">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

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

Agrid-cols-3

Bgrid-cols-2

Cgrid-rows-3

Dgrid-flow-col

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-cols-2 creates only 2 columns.

Using grid-rows-3 sets rows, not columns.

Using grid-flow-col changes flow direction, not column count.

The class grid-cols-3 sets the grid to have 3 columns.

3fill in blank

hard

Fix the error in the code to properly activate a grid container with 4 columns.

Tailwind

<section class="[1] grid-cols-4 gap-3">
  <article>Content A</article>
  <article>Content B</article>
  <article>Content C</article>
  <article>Content D</article>
</section>

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

Agrid

Bblock

Cinline-grid

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex activates flexbox, not grid.

Using inline-grid is valid but not the intended answer here.

Using block does not activate grid.

The class grid activates the grid container. Without it, grid-cols-4 has no effect.

4fill in blank

hard

Fill both blanks to create a grid container with 2 rows and a gap of 6.

Tailwind

<div class="[1] [2] gap-6">
  <div>Row 1</div>
  <div>Row 2</div>
</div>

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

Agrid

Bgrid-cols-1

Cgrid-rows-2

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex instead of grid.

Using grid-cols-1 sets columns, not rows.

grid activates the grid container, and grid-rows-2 sets 2 rows.

5fill in blank

hard

Fill all three blanks to create a grid container with 3 columns, 2 rows, and a gap of 4.

Tailwind

<section class="[1] [2] [3] grid-rows-2">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</section>

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

Agrid

Bgrid-cols-3

Cgrid-rows-2

Dgap-4

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to activate grid with grid.

Mixing up rows and columns classes.

Using wrong gap size class.

grid activates the grid container, grid-cols-3 sets 3 columns, and gap-4 sets the gap size.