CSS grid-row Property

What You’ll Learn

The grid-row property lets you control how many rows a grid item spans and where it starts and ends vertically.

Introduction

The grid-row property in CSS is a shorthand property for defining both the start and end lines of a grid item within a grid container. It is used in CSS Grid Layout to control the placement of items within the rows of a grid, allowing for precise control over their positioning and spanning across multiple rows.

Definition and Usage

Apply grid-row on a child of a grid container with display: grid. Use line numbers like 1 / 3 when you need an item to stretch across two rows. Use span 2 when you only care how many rows an item should cover.

📝 Syntax

The syntax for the grid-row property combines the start and end lines of a grid item:

element {
  grid-row: start / end;
}

• start — Specifies the starting grid line for the item.
• end — Specifies the ending grid line for the item.

Longhand Syntax

element {
  grid-row-start: start;
  grid-row-end: end;
}

Default Value

The default value of the grid-row property is auto / auto, meaning the item will be placed in the next available grid cell and will span only one row.

Syntax Rules

• Applies to grid items (children of a grid container), not the container itself.
• Shorthand for grid-row-start and grid-row-end.
• Accepts line numbers, span n, named lines, and auto.
• The property is not inherited.
• Negative line numbers count from the bottom of the grid.

💎 Property Values

Examples Gallery

Span two rows with line numbers, use span shorthand, build a full-height sidebar, and combine row and column placement.

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

.hero {
  grid-row: span 2;
}

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

.header { grid-row: 1; grid-column: 1 / -1; }
.content { grid-row: 2 / -1; grid-column: 1 / -1; }

♿ Accessibility

• Keep DOM order meaningful when row placement changes visual reading flow.
• Do not rely on row position alone to convey meaning; use headings and labels.
• Test keyboard tab order when tall items reorder the visual layout.
• Use semantic HTML such as <header> and <main> alongside grid placement.
• Verify content remains readable when items span many rows on small screens.

💡 Best Practices