Column spanning in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the first grid item span 2 columns.

Tailwind

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

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

Acol-span-2

Bcol-start-2

Ccol-end-3

Dcol-span-3

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-start-2 only changes the start column, not the span.

Using col-end-3 is about ending position, not span.

Using col-span-3 spans all columns, not 2.

Using col-span-2 makes the grid item span across 2 columns.

2fill in blank

medium

Complete the code to make the second grid item span 3 columns.

Tailwind

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

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

Acol-span-2

Bcol-start-3

Ccol-span-4

Dcol-span-3

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-span-2 spans fewer columns than needed.

Using col-span-4 spans all columns, not 3.

Using col-start-3 only changes start position.

col-span-3 makes the item span 3 columns in a 4-column grid.

3fill in blank

hard

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

Tailwind

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

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

Acol-span-2

Bcol-span-4

Ccol-start-2

Dcol-end-3

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-span-4 in a 3-column grid causes layout issues.

Using col-start-2 only changes start position.

Using col-end-3 is not for spanning columns.

The correct class to span 2 columns is col-span-2. Other options cause errors or don't span correctly.

4fill in blank

hard

Fill both blanks to make the first item span 2 columns and the second item span 3 columns.

Tailwind

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

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

Acol-span-2

Bcol-span-4

Ccol-span-3

Dcol-start-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-span-4 for the first item spans too many columns.

Using col-start-2 does not control span.

Mixing up the spans between items.

Use col-span-2 for the first item and col-span-3 for the second item to span the correct number of columns.

5fill in blank

hard

Fill all three blanks to create a grid where the first item spans 3 columns, the second item spans 1 column, and the third item spans 2 columns.

Tailwind

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

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

Acol-span-3

Bcol-span-1

Ccol-span-2

Dcol-start-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-start-2 instead of a span class.

Assigning wrong span numbers that don't add up.

Using the same span for all items.

Assign col-span-3 to the first item, col-span-1 to the second, and col-span-2 to the third to match the required spans.