Grid auto-flow and placement in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the grid to flow items by rows.

Tailwind

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

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

Agrid-flow-col

Bgrid-cols-3

Cgrid-flow-row

Dgrid-rows-3

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-flow-col which flows items by columns instead of rows.

Confusing grid-cols-3 with flow direction.

The class grid-flow-row makes the grid place items by rows, filling each row before moving to the next.

2fill in blank

medium

Complete the code to make the grid flow items by columns.

Tailwind

<section class="grid [1] gap-2">
  <div class="bg-yellow-400 p-3">A</div>
  <div class="bg-purple-400 p-3">B</div>
  <div class="bg-pink-400 p-3">C</div>
</section>

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

Agrid-rows-1

Bgrid-flow-col

Cgrid-cols-1

Dgrid-flow-row

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-flow-row which flows items by rows.

Confusing column flow with number of columns.

The class grid-flow-col makes the grid place items by columns, filling each column before moving to the next.

3fill in blank

hard

Fix the error in the code to correctly place the item in the second column.

Tailwind

<div class="grid grid-cols-3 gap-4">
  <div class="bg-gray-300 p-4">Item 1</div>
  <div class="bg-gray-500 p-4 col-start-[1]">Item 2</div>
  <div class="bg-gray-700 p-4">Item 3</div>
</div>

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

A3

B1

C4

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-start-1 which places the item in the first column.

Using a number outside the grid columns like 4.

The class col-start-2 places the item starting at the second column.

4fill in blank

hard

Fill both blanks to create a grid with 2 rows and place the item in the second row.

Tailwind

<div class="grid [1] gap-3">
  <div class="bg-teal-400 p-3 row-start-[2]">Hello</div>
</div>

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

Agrid-rows-2

Bgrid-cols-2

C2

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-cols-2 which sets columns, not rows.

Placing the item in row 1 instead of row 2.

grid-rows-2 sets the grid to have 2 rows. row-start-2 places the item in the second row.

5fill in blank

hard

Fill all three blanks to create a grid flowing by columns with 3 columns and place the item starting at column 3.

Tailwind

<div class="grid [1] [2] gap-2">
  <div class="bg-orange-400 p-2 col-start-[3]">Box</div>
</div>

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

Agrid-flow-row

Bgrid-cols-3

C3

Dgrid-flow-col

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-flow-row instead of grid-flow-col.

Setting wrong number of columns.

Placing the item in the wrong column.

grid-flow-col makes the grid flow by columns. grid-cols-3 sets 3 columns. col-start-3 places the item starting at the third column.