Row spanning in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the first table cell span 2 rows using Tailwind CSS.

Tailwind

<table class="table-auto border-collapse border border-gray-400">
  <tr>
    <td class="border border-gray-300 [1]">Row 1, Cell 1</td>
    <td class="border border-gray-300">Row 1, Cell 2</td>
  </tr>
  <tr>
    <td class="border border-gray-300">Row 2, Cell 2</td>
  </tr>
</table>

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

Arow-start-2

Bcol-span-2

Crow-span-2

Dcol-start-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-span-2 which spans columns instead of rows.

Using row-start-2 which sets the start row but does not span.

The Tailwind class row-span-2 makes the cell span 2 rows vertically.

2fill in blank

medium

Complete the code to make the second cell in the first row span 3 rows using Tailwind CSS.

Tailwind

<table class="table-auto border-collapse border border-gray-400">
  <tr>
    <td class="border border-gray-300">Row 1, Cell 1</td>
    <td class="border border-gray-300 [1]">Row 1, Cell 2</td>
  </tr>
  <tr>
    <td class="border border-gray-300">Row 2, Cell 1</td>
  </tr>
  <tr>
    <td class="border border-gray-300">Row 3, Cell 1</td>
  </tr>
</table>

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

Arow-span-3

Brow-span-2

Ccol-span-3

Dcol-span-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-span-3 which spans columns instead of rows.

Using a smaller span like row-span-2 which is not enough.

The class row-span-3 makes the cell span 3 rows vertically.

3fill in blank

hard

Fix the error in the code to correctly span the first cell over 2 rows using Tailwind CSS.

Tailwind

<table class="table-auto border-collapse border border-gray-400">
  <tr>
    <td class="border border-gray-300 [1]">Row 1, Cell 1</td>
    <td class="border border-gray-300">Row 1, Cell 2</td>
  </tr>
  <tr>
    <td class="border border-gray-300">Row 2, Cell 2</td>
  </tr>
</table>

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

Arow-span-1

Brow-span-2

Ccol-span-2

Dcol-span-1

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-span-2 which spans columns.

Using row-span-1 which does not span multiple rows.

The correct class to span 2 rows is row-span-2. Other options either span columns or only 1 row.

4fill in blank

hard

Fill both blanks to make the first cell span 2 rows and the second cell span 2 columns using Tailwind CSS.

Tailwind

<table class="table-auto border-collapse border border-gray-400">
  <tr>
    <td class="border border-gray-300 [1]">Row 1, Cell 1</td>
    <td class="border border-gray-300 [2]">Row 1, Cell 2</td>
  </tr>
  <tr>
    <td class="border border-gray-300">Row 2, Cell 3</td>
  </tr>
</table>

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

Arow-span-2

Bcol-span-1

Ccol-span-2

Drow-span-1

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up row and column span classes.

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

The first cell uses row-span-2 to span 2 rows vertically. The second cell uses col-span-2 to span 2 columns horizontally.

5fill in blank

hard

Fill all three blanks to create a table where the first cell spans 3 rows, the second cell spans 2 columns, and the third cell spans 2 rows using Tailwind CSS.

Tailwind

<table class="table-auto border-collapse border border-gray-400">
  <tr>
    <td class="border border-gray-300 [1]">Row 1, Cell 1</td>
    <td class="border border-gray-300 [2]">Row 1, Cell 2</td>
  </tr>
  <tr>
    <td class="border border-gray-300 [3]">Row 2, Cell 3</td>
  </tr>
  <tr>
    <td class="border border-gray-300">Row 3, Cell 4</td>
  </tr>
</table>

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

Arow-span-3

Bcol-span-2

Crow-span-2

Dcol-span-1

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing row and column span classes.

Using wrong numbers for the span.

The first cell uses row-span-3 to cover 3 rows vertically. The second cell uses col-span-2 to cover 2 columns horizontally. The third cell uses row-span-2 to cover 2 rows vertically.

Practice

1. What does the Tailwind class row-span-3 do inside a grid container?

easy

A. Makes the grid item span 3 rows vertically.

B. Makes the grid item span 3 columns horizontally.

C. Adds 3 rows of padding inside the grid item.

D. Sets the grid item height to 3 rem.

Solution

1. Step 1: Understand the row-span-{n} class

   This class controls how many rows a grid item covers vertically.

2. Step 2: Apply row-span-3 meaning

   The number 3 means the item will cover 3 rows in the grid layout.

3. Final Answer:

   Makes the grid item span 3 rows vertically. -> Option A

4. Quick Check:

   row-span-3 = span 3 rows [OK]

Hint: Remember: row-span controls vertical coverage [OK]

Common Mistakes:

• Confusing row-span with column-span
• Thinking it adds padding or margin
• Assuming it sets fixed height

2. Which of these is the correct Tailwind syntax to make a grid item span 2 rows?

easy

A. col-span-2

B. row-span-2

C. row-span2

D. span-row-2

Solution

1. Step 1: Recall Tailwind's row spanning syntax

   The correct format uses a dash: row-span-{number}.

2. Step 2: Check each option

   Only row-span-2 matches the correct syntax for spanning 2 rows.

3. Final Answer:

   row-span-2 -> Option B

4. Quick Check:

   Correct syntax = row-span-2 [OK]

Hint: Use dash between 'row-span' and number [OK]

Common Mistakes:

• Using col-span instead of row-span
• Missing dash between words and number
• Reversing order of words

3. Given this HTML snippet inside a grid container:

<div class="grid grid-rows-4 grid-cols-2 gap-2">
  <div class="row-span-2 bg-blue-500">A</div>
  <div class="bg-red-500">B</div>
  <div class="bg-green-500">C</div>
  <div class="bg-yellow-500">D</div>
</div>

How many rows tall will the blue box labeled 'A' appear?

medium

A. 1 row tall

B. 3 rows tall

C. 4 rows tall

D. 2 rows tall

Solution

1. Step 1: Identify the row-span class on the blue box

   The blue box has row-span-2, meaning it covers 2 rows vertically.

2. Step 2: Understand grid rows count

   The grid has 4 rows total, but the blue box only spans 2 of them.

3. Final Answer:

   2 rows tall -> Option D

4. Quick Check:

   row-span-2 means 2 rows [OK]

Hint: Look for row-span number to find height in rows [OK]

Common Mistakes:

• Assuming it spans all rows
• Confusing rows with columns
• Ignoring the row-span class

4. You wrote this code but the grid item does not span multiple rows:

<div class="grid grid-rows-3 grid-cols-3">
  <div class="row-span3 bg-purple-400">Item</div>
</div>

What is the error?

medium

A. Missing dash in row-span3, should be row-span-3.

B. Grid container needs grid-flow-row to enable spanning.

C. The grid must have grid-rows-4 to allow spanning 3 rows.

D. The item needs col-span-3 instead of row-span.

Solution

1. Step 1: Check the row-span class syntax

   The class is written as row-span3 but Tailwind requires a dash: row-span-3.

2. Step 2: Understand the effect of syntax error

   Without the dash, Tailwind ignores the class, so no spanning happens.

3. Final Answer:

   Missing dash in row-span3, should be row-span-3. -> Option A

4. Quick Check:

   Correct syntax needs dash [OK]

Hint: Always include dash between 'row-span' and number [OK]

Common Mistakes:

• Forgetting the dash in class names
• Assuming grid-rows count limits spanning
• Confusing row-span with col-span

5. You want a grid layout with 3 columns and 4 rows. The first item should cover the first 2 rows and 2 columns. Which Tailwind classes correctly achieve this?

hard

A. grid grid-cols-2 grid-rows-4; item: row-span-2 col-span-3

B. grid grid-cols-4 grid-rows-3; item: row-span-2 col-span-2

C. grid grid-cols-3 grid-rows-4; item: row-span-2 col-span-2

D. grid grid-cols-3 grid-rows-4; item: row-span-3 col-span-1

Solution

1. Step 1: Set grid container with 3 columns and 4 rows

   The container needs grid-cols-3 and grid-rows-4 to match the layout.

2. Step 2: Make the item span 2 rows and 2 columns

   Use row-span-2 for vertical spanning and col-span-2 for horizontal spanning.

3. Final Answer:

   grid grid-cols-3 grid-rows-4; item: row-span-2 col-span-2 -> Option C

4. Quick Check:

   Correct grid + row-span-2 + col-span-2 [OK]

Hint: Match grid size, then span rows and columns as needed [OK]

Common Mistakes:

• Mixing up grid-cols and grid-rows numbers
• Using wrong span numbers for item
• Forgetting to span columns when needed