How to span multiple rows in grid in css

CssHow-ToBeginner · 3 min read

How to Span Multiple Rows in CSS Grid: Simple Guide

To span multiple rows in CSS Grid, use the grid-row property on the grid item. Set it like grid-row: start / end; where start and end are grid line numbers or use span to cover multiple rows, for example grid-row: span 3; makes the item cover 3 rows.

📐

Syntax

The grid-row property controls how many rows a grid item covers. It uses two values separated by a slash:

start: The starting grid line number.
end: The ending grid line number or span keyword to cover multiple rows.

Example: grid-row: 1 / 4; means the item starts at row line 1 and ends before row line 4, spanning 3 rows.

Alternatively, grid-row: span 3; means the item spans 3 rows from its current position.

css

/* Syntax examples */
.grid-item {
  grid-row: 1 / 4; /* e.g. 1 / 4 */
}

/* Or using span */
.grid-item {
  grid-row: span 3;
}

💻

Example

This example shows a 3x3 grid where the first item spans 2 rows using grid-row: span 2;. The other items fill the grid normally.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Grid Row Span Example</title>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
    background-color: #eee;
    padding: 10px;
  }
  .grid-item {
    background-color: #4CAF50;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
  }
  .span-rows {
    grid-row: span 2;
    background-color: #2196F3;
  }
</style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item span-rows">Span 2 Rows</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
</body>
</html>

Output

A 3 by 3 grid with green boxes numbered 2 to 9 and a blue box labeled 'Span 2 Rows' on the top-left that is twice as tall as the others, spanning two rows vertically.

⚠️

Common Pitfalls

Common mistakes when spanning rows in CSS Grid include:

Using grid-row: 2 / 4; without understanding grid lines can cause unexpected spans if the grid has fewer rows.
Not setting display: grid; on the container, so grid-row has no effect.
Forgetting that grid lines start at 1, not 0.
Using grid-row: span 0; or negative numbers, which are invalid.

Example of wrong and right usage:

css

/* Wrong: no grid container */
.container {
  /* missing display: grid; */
}
.item {
  grid-row: span 2; /* has no effect */
}

/* Right: with grid container */
.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
}
.item {
  grid-row: span 2;
}

📊

Quick Reference

Remember these quick tips for spanning rows in CSS Grid:

grid-row: start / end; sets exact grid lines.
grid-row: span n; spans n rows from current position.
Grid lines start at 1, counting from top to bottom.
Always set display: grid; on the container.
Use browser DevTools to inspect grid lines visually.

✅

Key Takeaways

Use the grid-row property with span to cover multiple rows easily.

Grid lines start at 1, so count carefully when specifying start and end.

Always set display: grid on the container for grid-row to work.

Use span syntax for simpler row spanning without counting lines.

Check your layout in browser DevTools to avoid common mistakes.