grid-row-start

grid-row-start supplies the block-start boundary of a grid item’s area. It is normally the top edge in horizontal writing; vertical writing changes the physical direction.

Leave the first row empty

The grid has three explicit 50px rows. The item starts at line 2 and occupies the second row, while the other rows stay visible through the container background.

<div class="layout"><div class="feature">Starts at row line 2</div></div>

.layout {
  display: grid;
  grid-template-rows: repeat(3, 50px);
  gap: 0.5rem;
  background: #f1f5f9;
}
.feature {
  grid-row-start: 2;
}
.layout > * {
  padding: 0.5rem;
  background: #dbeafe;
}
.layout > .feature {
  background: #bfdbfe;
}

Start two tracks before the final boundary

With a definite end at line 4, span 2 on the start counts backward to line 2. This is useful when the ending boundary is the stable part of the placement.

<div class="layout"><div class="feature">Last two rows</div></div>

.layout {
  display: grid;
  grid-template-rows: repeat(3, 50px);
  gap: 0.5rem;
  background: #f1f5f9;
}
.feature {
  grid-row-start: span 2;
  grid-row-end: 4;
}
.layout > * {
  padding: 0.5rem;
  background: #dbeafe;
}
.layout > .feature {
  background: #bfdbfe;
}

Values and defaults

The initial value is auto and the property is not inherited. Auto contributes no definite start. Nonzero integers select lines, and negative integers count back from the explicit grid’s end. Names can match explicit or generated area-start lines. Positive spans count from the opposite boundary.

A start span is not an absolute row number. When both boundaries are indefinite, the placement algorithm resolves the requested span along with the other items.

Why another rule wins

Grid-row and grid-area shorthands can reset this longhand. Out-of-range lines may create implicit rows sized by grid-auto-rows. A start boundary does not set the height of a row or item.

Learn grid-row-end, grid-template-rows, and writing-mode. Visual row placement must not replace a meaningful source order.

Sources and browser support

MDN: grid-row-start describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.

CSS Grid placement specification defines line matching and shorthand behavior.