CSS Grid allows you to control the vertical position and size of Grid items using rows. The grid-row property defines where a Grid item starts and ends across the Grid rows.

What is grid-row?

The grid-row property is used to position a Grid item vertically.

It specifies the starting and ending row lines of an item.

Basic Syntax

.item {
    grid-row: 1 / 3;
}

The item starts at row line 1 and ends at row line 3.

Therefore, the item spans across 2 rows.

Understanding Grid Row Lines

Grid rows are separated by horizontal row lines. These lines are used to position Grid items vertically.

Row 1

Row 2

Row 3

A three-row Grid has four horizontal row lines.

grid-row-start

.item {
    grid-row-start: 2;
}

The item starts at row line 2.

When an ending position is not specified, the browser determines the remaining placement automatically.

grid-row-end

.item {
    grid-row-end: 4;
}

The item ends at row line 4.

Using grid-row-start and grid-row-end

.item {
    grid-row-start: 1;
    grid-row-end: 3;
}

The item starts at row line 1 and ends at row line 3.

Therefore, it occupies 2 rows.

grid-row Shorthand

.item {
    grid-row: 1 / 3;
}

The shorthand combines:

grid-row-start: 1;
grid-row-end: 3;

The item spans from row line 1 to row line 3.

Using span

The span keyword allows an item to occupy a specific number of rows.

.item {
    grid-row: span 2;
}

The item occupies 2 rows.

Its starting position is determined by the Grid's automatic placement.

Practical Example

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 90px);
    gap: 15px;
}

.sidebar {
    grid-row: 1 / 4;
}

The Grid contains three rows.

The sidebar starts at row line 1 and ends at row line 4.

Therefore, the sidebar spans across all 3 rows.

Output

Sidebar

Content 1

Content 2

Content 3

Content 4

Content 5

Content 6

The Sidebar spans all three rows because the code uses grid-row: 1 / 4;.

grid-row vs grid-column

grid-row

Controls the vertical placement and size of a Grid item across rows.

grid-column

Controls the horizontal placement and size of a Grid item across columns.

Important Grid Row Properties

grid-row

Shorthand property used to define the starting and ending row lines.

grid-row-start

Defines the starting row line of a Grid item.

grid-row-end

Defines the ending row line of a Grid item.

Real-World Uses

Dashboard sidebars
Website layouts
Navigation panels
Admin dashboards
Content sections
Full-height cards

Important: The values in grid-row refer to Grid row lines. For example, grid-row: 1 / 4; spans three Grid rows.

Summary

The grid-row property controls the vertical placement of a Grid item. It can define the starting and ending row lines of an item. The grid-row-start and grid-row-end properties provide separate control, while grid-row provides a shorthand way to define both values.

← Previous: Grid Column

Next: Grid Area →