grid-row

grid-row sets grid-row-start and grid-row-end for an item. Row boundaries follow the block axis, normally from top to bottom in horizontal writing.

Span two row tracks

Line 1 to line 3 encloses two 50px rows and their gap. The item occupies the first column while the other items fill the second.

<div class="layout">
  <div class="feature">Two rows</div>
  <div>A</div>
  <div>B</div>
</div>

.layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 50px);
  gap: 0.5rem;
}
.feature {
  grid-row: 1 / 3;
}
.layout > * {
  padding: 0.5rem;
  background: #dbeafe;
}
.layout > .feature {
  background: #bfdbfe;
}

Keep a supplementary note beside two steps

The note spans two content-sized rows. The source order still introduces the note before the steps, so this arrangement must suit the meaning of the document.

<div class="layout">
  <aside class="feature">Practice both steps before moving on.</aside>
  <p>First: change one value.</p>
  <p>Second: compare the result.</p>
</div>

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  grid-auto-rows: minmax(3rem, auto);
  gap: 0.5rem;
}
.feature {
  grid-row: 1 / span 2;
}
.layout > * {
  padding: 0.5rem;
  background: #dbeafe;
}
.layout > .feature {
  background: #bfdbfe;
}

Values and resets

The start/end longhands initially use auto and are not inherited. Integers identify lines; negative integers count back from the explicit row grid’s end. Span counts must be positive. Auto leaves the corresponding placement to the Grid algorithm.

An omitted end becomes auto for a numeric start. A single area name can match generated start/end lines instead. The shorthand sets both longhands, so it can erase an earlier end-line rule.

Spanning does not size rows

Grid-row chooses an item’s area. Grid template rows and grid auto rows size tracks. An out-of-range line can create implicit rows, while -1 refers only to the explicit grid’s final boundary.

Avoid placing ordered steps in a visual sequence that disagrees with the HTML. Learn grid-row-start and grid-row-end to inspect each boundary separately.

Sources and browser support

MDN: grid-row 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.