grid-row

Definition

The grid-row CSS property is a shorthand property that combines both grid-row-start and grid-row-end properties. It is used in grid layouts to specify the starting and ending positions of a grid item along the vertical axis.

The grid-row property accepts values that represent the grid lines at which the grid item should start and 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: 2 / 4;
}

In this example, the grid-row: 2 / 4; rule sets the grid item to start at the second grid line and end at the fourth grid line vertically. This means the grid item will span across two grid tracks.

The grid-row property provides a convenient way to specify both the starting and ending positions of a grid item along the vertical axis. It simplifies the declaration of grid placement and allows for more concise grid layout code.

Syntax

.hero {
  grid-row: 1 / span 2;
}

Values

• grid-row: <start> / <end> with line numbers or spans.

Practical Examples

.hero {
  grid-row: 1 / span 2;
}

Place items across multiple rows.

<div class="grid gap-4 rounded-2xl 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;">Tall hero</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

• Combine with grid-column for two-dimensional placement.

Accessibility & UX Notes

Large spans should not disrupt reading order.

Browser Support

Supported widely.

Related

• grid-row-start, grid-row-end