Implicit grid sizing 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 grid-cols-[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'

A3

B5

C2

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using a number other than 3 for the columns.

Forgetting to add the grid class.

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 grid-cols-[1] gap-[2]">
  <div class="bg-yellow-400">Item A</div>
  <div class="bg-pink-400">Item B</div>
  <div class="bg-purple-400">Item C</div>
  <div class="bg-indigo-400">Item D</div>
</div>

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

A4

B3

C6

D8

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong number for columns or gap.

Mixing up gap and padding classes.

The class grid-cols-4 sets 4 columns, and gap-6 sets the gap size between grid items.

3fill in blank

hard

Fix the error in the code to make the grid automatically create columns with a minimum width of 10rem using Tailwind CSS.

Tailwind

<div class="grid grid-cols-[1] gap-4">
  <div class="bg-gray-300">Box 1</div>
  <div class="bg-gray-400">Box 2</div>
  <div class="bg-gray-500">Box 3</div>
</div>

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

A[repeat(auto-fill,minmax(10rem,1fr))]

B[auto-fit_minmax(10rem,_1fr)]

C[repeat(auto-fit,minmax(10rem,1fr))]

D[repeat(auto-fill,minmax(10rem,2fr))]

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting repeat() wrapper.

Using spaces incorrectly or auto-fit instead of auto-fill.

Not using square brackets for arbitrary values.

In Tailwind CSS, to use custom grid-template-columns with repeat(auto-fill, minmax) for responsive implicit grid sizing, you wrap the valid CSS value in square brackets: grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] is correct.

4fill in blank

hard

Fill both blanks to create a grid that automatically fits columns with a minimum width of 12rem and a gap of 8.

Tailwind

<div class="grid grid-cols-[1] gap-[2]">
  <div class="bg-red-200">Item 1</div>
  <div class="bg-red-400">Item 2</div>
  <div class="bg-red-600">Item 3</div>
  <div class="bg-red-800">Item 4</div>
</div>

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

A[repeat(auto-fit,minmax(12rem,1fr))]

B6

C8

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using gap-6 instead of gap-8.

Omitting repeat() in the grid columns value.

Not using square brackets for the custom grid columns.

The class grid-cols-[repeat(auto-fit,minmax(12rem,1fr))] sets the grid to automatically fit columns with a minimum width of 12rem. The class gap-8 sets the gap size between items.

5fill in blank

hard

Fill all three blanks to create a responsive grid that uses auto-fill with a minimum column width of 14rem, a gap of 10, and a background color of blue-100.

Tailwind

<div class="grid grid-cols-[1] gap-[2] bg-[3]">
  <div>Box A</div>
  <div>Box B</div>
  <div>Box C</div>
  <div>Box D</div>
</div>

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

A[repeat(auto-fill,minmax(14rem,1fr))]

B10

Cblue-100

Dblue-200

Attempts:

3 left

💡 Hint

Common Mistakes

Using blue-200 instead of blue-100 for background.

Omitting repeat() for the custom grid columns.

The class grid-cols-[repeat(auto-fill,minmax(14rem,1fr))] sets the grid to auto-fill columns with a minimum width of 14rem. The class gap-10 sets the spacing between grid items. The class bg-blue-100 sets a light blue background color.