grid-row-end

Definition

The grid-row-end CSS property is used in grid layouts to specify the ending position of a grid item along the vertical axis.

The grid-row-end property accepts a value that represents the grid line at which the grid item should end. Grid lines can be identified using line numbers, names of named grid lines, or the span keyword to span across multiple grid tracks.

Here’s an example:

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

In this example, the grid-row-end: span 2; rule sets the grid item to span across two grid tracks vertically. This means the grid item will end at the second grid line from its starting position along the vertical axis.

The grid-row-end property works in conjunction with grid-row-start to define the vertical range of grid placement for grid items within a grid container. It allows you to control the positioning and spanning of grid items along the vertical axis in a grid layout.

Syntax

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

Values

• Line numbers, named lines, or span.

Practical Examples

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

Control how many rows an item occupies.

<div class="grid gap-4 rounded-xl border border-slate-200 bg-white p-4 shadow-sm" style="display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(6rem,auto)); gap:1rem;">
  <div class="rounded-lg bg-slate-100 p-3 text-sm text-slate-700" style="grid-row:1 / span 2;">Span 2 rows</div>
  <div class="rounded-lg bg-slate-100 p-3 text-sm text-slate-700">Item</div>
  <div class="rounded-lg bg-slate-100 p-3 text-sm text-slate-700">Item</div>
</div>

Tips & Best Practices

• span values stay resilient when track counts change.

Accessibility & UX Notes

Ensure large spans don’t hide important focusable elements.

Browser Support

Supported in modern browsers.

Related

• grid-row-start, grid-row