Row spanning in Tailwind

Introduction

Row spanning lets a cell in a grid or table stretch across multiple rows. This helps organize content better and saves space.

You want a menu item to cover two rows in a sidebar.

You need a photo to take up more vertical space in a gallery layout.

You want a heading to span multiple rows in a grid for clarity.

You want to highlight a special note that covers several rows in a list.

Syntax

Tailwind

row-span-{n}

Replace {n} with the number of rows to span.

This class works inside a parent with grid display.

Examples

The first box stretches over two rows, the others fill one row each.

Tailwind

<div class="grid grid-cols-2 grid-rows-3 gap-2">
  <div class="row-span-2 bg-blue-300">Spans 2 rows</div>
  <div class="bg-blue-100">Row 1</div>
  <div class="bg-blue-100">Row 2</div>
  <div class="bg-blue-100">Row 3</div>
</div>

This box covers three rows vertically, making it taller than the others.

Tailwind

<div class="grid grid-cols-2 grid-rows-4 gap-1">
  <div class="row-span-3 bg-green-300">Spans 3 rows</div>
  <div class="bg-green-100">Row 1</div>
  <div class="bg-green-100">Row 2</div>
  <div class="bg-green-100">Row 3</div>
</div>

Sample Program

This example shows a grid with 3 rows and 3 columns. The first cell uses row-span-2 to stretch vertically over two rows. The other cells fill the remaining spaces. The colors and center alignment help you see the layout clearly.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Tailwind Row Spanning Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="text-xl font-bold mb-4">Row Spanning with Tailwind CSS</h1>
  <div class="grid grid-rows-3 grid-cols-3 gap-4 border border-gray-300 p-4">
    <div class="row-span-2 bg-indigo-400 text-white flex items-center justify-center">Spans 2 rows</div>
    <div class="bg-indigo-200 flex items-center justify-center">Cell 1</div>
    <div class="bg-indigo-200 flex items-center justify-center">Cell 2</div>
    <div class="bg-indigo-200 flex items-center justify-center">Cell 3</div>
    <div class="bg-indigo-200 flex items-center justify-center">Cell 4</div>
    <div class="bg-indigo-200 flex items-center justify-center">Cell 5</div>
  </div>
</body>
</html>

Important Notes

Row spanning only works inside a grid container.

Make sure the parent has enough rows defined to span across.

Use gap classes to add space between grid items for clarity.

Summary

Row spanning lets a grid item cover multiple rows vertically.

Use row-span-{n} inside a grid container to control spanning.

This helps create flexible and organized layouts with Tailwind CSS.

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