Why CSS Grid solves complex layouts in Tailwind - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create 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'

Ainline

Bgrid

Cblock

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex instead of grid will create a flexbox layout, not grid.

Using block or inline won't create a grid container.

Using grid class makes the container a CSS Grid container, enabling grid layout.

2fill in blank

medium

Complete the code to define a grid with 3 equal 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-2

Bgrid-rows-3

Cgrid-flow-col

Dgrid-cols-3

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using grid-cols-2 creates only 2 columns, not 3.

The class grid-cols-3 creates 3 equal columns in the grid.

3fill in blank

hard

Fix the error in the code to make the grid items span 2 columns.

Tailwind

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-[1]">Wide Item</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

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

A2

B3

C4

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-span-3 spans 3 columns, which may break layout.

Using col-span-1 does not span multiple columns.

The class col-span-2 makes the item span 2 columns.

4fill in blank

hard

Fill both blanks to create a grid with 2 rows and 3 columns.

Tailwind

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

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

Agrid-rows-2

Bgrid-cols-4

Cgrid-cols-3

Dgrid-rows-3

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up rows and columns classes.

Using wrong numbers for rows or columns.

grid-rows-2 sets 2 rows and grid-cols-3 sets 3 columns.

5fill in blank

hard

Fill both blanks to create a grid where the first item spans 2 columns and 2 rows.

Tailwind

<div class="grid grid-cols-4 grid-rows-3 gap-2">
  <div class="col-span-[1] row-span-[2]">Big Item</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

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

A1

B2

C3

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using 3 or 4 for spans which may exceed grid size.

Using 1 which means no spanning.

The first item should have col-span-2 and row-span-2 to span 2 columns and 2 rows.