Defining grid rows in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a grid container with three rows.

Tailwind

<div class="grid [1]">
  <div>Row 1</div>
  <div>Row 2</div>
  <div>Row 3</div>
</div>

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

Agrid-rows-3

Bgrid-cols-3

Cgrid-flow-row

Dgrid-flow-col

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-cols-3 which sets columns instead of rows.

Using flow classes like grid-flow-col which control flow direction.

The class grid-rows-3 sets the grid to have three rows.

2fill in blank

medium

Complete the code to define a grid with four rows using Tailwind CSS.

Tailwind

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

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

Agrid-flow-row

Bgrid-cols-4

Cgrid-rows-4

Dgrid-flow-col

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-cols-4 which sets columns instead of rows.

Using flow classes that do not set row count.

The class grid-rows-4 sets the grid to have four rows.

3fill in blank

hard

Fix the error in the code to correctly define a grid with two rows.

Tailwind

<div class="grid [1] gap-2">
  <div>First</div>
  <div>Second</div>
</div>

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

Agrid-cols-2

Bgrid-row-2

Cgrid-rows-1

Dgrid-rows-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-row-2 which is not a valid Tailwind class.

Using grid-cols-2 which sets columns instead of rows.

The correct class to define two rows is grid-rows-2. grid-row-2 is invalid.

4fill in blank

hard

Fill both blanks to create a grid with three rows and a gap between rows.

Tailwind

<div class="grid [1] [2]">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

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

Agrid-rows-3

Bgap-4

Cgap-2

Dgrid-cols-3

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-cols-3 instead of rows.

Using a gap class that is too large or unrelated.

grid-rows-3 sets three rows, and gap-2 adds spacing between rows and columns.

5fill in blank

hard

Fill all three blanks to create a grid with four rows, a gap of 6, and flow direction as rows.

Tailwind

<section class="grid [1] [2] [3]">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</section>

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

Agrid-rows-4

Bgap-6

Cgrid-flow-row

Dgrid-cols-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-cols-4 instead of rows.

Using a gap class that is too small or missing.

Omitting the flow direction class.

grid-rows-4 sets four rows, gap-6 adds spacing, and grid-flow-row ensures the grid flows by rows.