CSS grid-row-end Property

What You’ll Learn

The grid-row-end property sets where a grid item stops on the row axis, controlling how many rows it spans vertically.

Introduction

The grid-row-end property in CSS is used in the Grid Layout to define the ending position of a grid item within the grid’s rows. This property allows you to span grid items over multiple rows, helping you create more complex and flexible layouts.

Definition and Usage

Apply grid-row-end on a child of a grid container. Use it alone with span n to stretch an item across multiple rows from its auto-placed start. Pair it with grid-row-start when you need both the starting and ending row lines defined separately.

📝 Syntax

The syntax for the grid-row-end property is straightforward. You can specify the row line where the grid item should end or the number of rows it should span:

element {
  grid-row-end: value;
}

Basic Example

.item1 {
  grid-row-end: span 2;
}

With grid-row-start

.featured {
  grid-row-start: 2;
  grid-row-end: 4;
}

Default Value

The default value of the grid-row-end property is auto, which means the grid item will end at the next available grid line by default.

Syntax Rules

• Applies to grid items (children of a grid container), not the container itself.
• Accepts line numbers, span n, named lines, and auto.
• Works with grid-row-start; together they form the grid-row shorthand.
• The property is not inherited.
• Negative line numbers count from the bottom of the grid.

💎 Property Values

Examples Gallery

Span rows with span, set an exact ending line, combine start and end, and stretch to the bottom row.

.item1 {
  grid-row-end: span 2;
}

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

.featured {
  grid-row-start: 2;
  grid-row-end: 4;
}

.sidebar {
  grid-row-start: 1;
  grid-row-end: -1;
}

♿ Accessibility

• Keep DOM order meaningful when row spanning 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 <nav> and <main> alongside grid placement.
• Verify content remains readable when items span many rows on small screens.

💡 Best Practices