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.