Defining grid columns in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Tailwind

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

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

Agrid-flow-col

Bgrid-rows-3

Cgrid-cols-3

Dgrid-cols-1

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-rows-3 instead of columns.

Using grid-flow-col which controls flow, not column count.

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

2fill in blank

medium

Complete the code to create a grid with 4 columns and a gap of 6 using Tailwind CSS.

Tailwind

<div class="grid [1] gap-6">
  <div class="bg-yellow-400">Box 1</div>
  <div class="bg-pink-400">Box 2</div>
  <div class="bg-purple-400">Box 3</div>
  <div class="bg-indigo-400">Box 4</div>
</div>

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

Agrid-cols-4

Bgrid-cols-2

Cgrid-cols-3

Dgrid-cols-5

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 3 or 5 columns instead of 4.

Confusing gap size with column count.

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

3fill in blank

hard

Fix the error in the code to correctly define a grid with 2 columns.

Tailwind

<div class="grid [1] gap-2">
  <div class="bg-gray-300">Cell 1</div>
  <div class="bg-gray-500">Cell 2</div>
</div>

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

Agrid-cols-1

Bgrid-cols-2

Cgrid-flow-row

Dgrid-rows-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-cols-1 which creates only 1 column.

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

The class grid-cols-2 correctly sets the grid to have 2 columns.

4fill in blank

hard

Fill both blanks to create a grid with 5 columns and a gap of 8 using Tailwind CSS.

Tailwind

<div class="grid [1] gap-[2]">
  <div class="bg-red-200">Item A</div>
  <div class="bg-red-400">Item B</div>
  <div class="bg-red-600">Item C</div>
  <div class="bg-red-800">Item D</div>
  <div class="bg-red-900">Item E</div>
</div>

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

Agrid-cols-5

B4

C8

D6

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing gap size with column count.

Using wrong gap size numbers.

grid-cols-5 sets 5 columns and gap-8 sets the gap size to 8.

5fill in blank

hard

Fill all three blanks to create a responsive grid with 1 column on small screens, 3 columns on medium, and 6 columns on large screens.

Tailwind

<div class="grid [1] [2] [3] gap-4">
  <div class="bg-green-100">Box 1</div>
  <div class="bg-green-300">Box 2</div>
  <div class="bg-green-500">Box 3</div>
  <div class="bg-green-700">Box 4</div>
  <div class="bg-green-900">Box 5</div>
  <div class="bg-green-800">Box 6</div>
</div>

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

Agrid-cols-1

Bmd:grid-cols-3

Clg:grid-cols-6

Dsm:grid-cols-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using sm: prefix instead of md: or lg:.

Not setting the base grid-cols class.

The classes grid-cols-1, md:grid-cols-3, and lg:grid-cols-6 create a responsive grid with 1 column on small screens, 3 on medium, and 6 on large.