grid-row-end

grid-row-end supplies the block-end boundary of a grid item’s area. A span counts tracks from its start; a line number identifies a boundary.

End after two tracks

With a start at line 1, span 2 ends at line 3. The item is as tall as those two rows plus the gap between them.

<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-start: 1;
  grid-row-end: span 2;
}
.layout > * {
  padding: 0.5rem;
  background: #dbeafe;
}
.layout > .feature {
  background: #bfdbfe;
}

Span a defined notes region

Named row boundaries describe the range. The note spans both rows while the adjacent explanation stays in separate cells.

<div class="layout">
  <aside class="feature">Remember to test both widths.</aside>
  <p>Read the source.</p>
  <p>Adapt the layout.</p>
</div>

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  grid-template-rows: [notes-start] minmax(3rem, auto) minmax(
      3rem,
      auto
    ) [notes-end];
  gap: 0.5rem;
}
.feature {
  grid-row-start: notes-start;
  grid-row-end: notes-end;
}
.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 supplies no definite end line. Nonzero integers, matching line names, and positive span counts are accepted. Negative line numbers count back from the explicit grid’s end; negative and zero spans are invalid.

Generated area-end names can match named areas. A later grid-row or grid-area shorthand can overwrite this boundary. Lines outside the explicit template can create implicit rows.

Common mistake

Span 2 means two tracks, requiring three boundaries including the start. It does not mean “end at line 2” when starting at line 1. The longhand demonstration uses grid-row-end itself so this difference is visible.

Use grid-template-rows to size explicit rows and grid-auto-rows for implicit rows. Check source and keyboard order whenever placement changes the visual sequence.

Sources and browser support

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