0
0
Tailwindmarkup~5 mins

Row spanning in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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>
OutputSuccess
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.