CSS grid-row-start Property

What You’ll Learn

The grid-row-start property sets where a grid item begins on the row axis, controlling its vertical starting position.

Introduction

The grid-row-start property in CSS is used in Grid Layout to specify the starting position of a grid item within a grid container. This property defines on which row line a grid item will start, providing control over the placement and layout of grid items.

Definition and Usage

Apply grid-row-start on a child of a grid container. Use a line number to jump an item to a specific row, or use span n when paired with an auto end line. Combine it with grid-row-end when you need both the starting and ending row lines defined separately.

📝 Syntax

The syntax for the grid-row-start property is as follows:

element {
  grid-row-start: value;
}

Basic Example

.item1 {
  grid-row-start: 3;
}

With span

.item2 {
  grid-row-start: span 2;
}

Default Value

The default value of the grid-row-start property is auto, which means the item will be placed according to the default positioning rules of the grid layout.

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-end; 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

Start items at row line 3, use span, pair with grid-row-end, and offset content from the first row.

.item1 {
  grid-row-start: 3;
}

.tall {
  grid-row-start: span 2;
}

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

.main {
  grid-row-start: 2;
  grid-row-end: -1;
}

♿ Accessibility

• Keep DOM order logical when visual row placement changes reading flow.
• Do not rely on row position alone to convey meaning; use headings and labels.
• Test keyboard tab order when items start in non-default rows.
• Use semantic HTML such as <main> and <header> alongside grid placement.
• Verify content remains readable when items are offset on small screens.

💡 Best Practices