Row spanning in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

What is the visual result of this Tailwind CSS grid with row-span?

Consider this HTML snippet using Tailwind CSS classes:

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

What will you see rendered in the browser?

Tailwind

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

A A block spans two rows in the first column; B and C appear to the right in the first row; D appears below B in the second row.

B A block spans two rows in the first column; B appears below A in the first column; C and D appear in the second and third columns of the first row.

C A block spans two rows in the first column; B, C, and D appear all in the second row across the three columns.

D A block spans two rows in the first column; B, C, and D appear stacked vertically in the second column.

💡 Hint

Remember that row-span-2 makes the element cover two rows vertically in the grid.

The element with row-span-2 covers two rows in the first column. The next grid items fill the remaining cells in row-major order. So B and C fill the first row's second and third columns, and D fills the second row's second column.

❓ selector

intermediate

Which Tailwind class correctly makes a grid item span 3 rows?

You want a grid item to cover three rows vertically in a Tailwind CSS grid. Which class should you use?

A row-start-3

B row-span-3

C col-span-3

D row-end-3

💡 Hint

Think about the difference between row-span and col-span.

row-span-3 makes the element span 3 rows vertically. col-span-3 spans columns, and row-start-3 or row-end-3 control grid line placement, not span.

🧠 Conceptual

advanced

What accessibility consideration is important when using row spanning in grids?

When using row spanning in CSS grids, what should you keep in mind to maintain good accessibility?

A Add <code>aria-rowspan</code> attributes to all grid items manually.

B Use only <code>row-span-1</code> to avoid confusion for screen readers.

C Avoid using grid layouts altogether for accessibility.

D Ensure the reading order in the HTML matches the visual order, so screen readers read content logically.

💡 Hint

Think about how screen readers read content versus how it looks visually.

Screen readers read content in the order it appears in the HTML. If the visual layout uses row spanning, the HTML order should still be logical to avoid confusion.

📝 Syntax

advanced

What error occurs if you write row-span2 instead of row-span-2 in Tailwind?

Consider this Tailwind class: row-span2. What happens when you use it in your HTML?

Tailwind

<div class="grid grid-cols-3">
  <div class="row-span2 bg-blue-500">A</div>
</div>

A The browser throws a syntax error and stops rendering.

B The element spans 2 rows as expected.

C The class is ignored; the element does not span rows because the class is invalid.

D The element spans 1 row but with a warning in the console.

💡 Hint

Tailwind classes must match exact patterns to apply styles.

row-span2 is not a valid Tailwind class. The correct class is row-span-2. Invalid classes are ignored silently.

❓ rendering

expert

How many grid cells does this element cover with row-span-3 col-span-2 in a 4x4 grid?

Given a 4 rows by 4 columns grid, an element has classes row-span-3 col-span-2. How many grid cells does it cover?

Tailwind

<div class="grid grid-cols-4 grid-rows-4 gap-2">
  <div class="row-span-3 col-span-2 bg-purple-600 text-white p-4">X</div>
  <!-- other grid items -->
</div>

A 6 cells

B 5 cells

C 8 cells

D 3 cells

💡 Hint

Multiply the number of rows spanned by the number of columns spanned.

The element spans 3 rows and 2 columns, so it covers 3 × 2 = 6 grid cells.

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