grid-row
A shorthand property for grid-row-start and grid-row-end. It defines an item's vertical position and height within a grid in one line.
Quick example
.hero-image {
grid-row: 1 / span 2;
} /* starts at row 1 and spans 2 rows down */Syntax
grid-row: <grid-line> [/ <grid-line>]?<integer><line-number> / <line-number>span <number><line-number> / span <number><name>autoQuick facts
See individual propertiesExamples
Span multiple rows
.sidebar {
grid-row: 1 / span 3;
}Sidebar starts at row line 1 and spans three rows down. Useful for tall content next to shorter stacked items.
Stretch to the last row
.footer {
grid-row: -2 / -1;
}Negative values count from the end. -1 is the last line, -2 is the second-to-last. This places the footer on the last row regardless of how many rows exist.
Explicit start and end
.hero {
grid-row: 1 / 3;
}Places the item starting at row line 1 and ending at row line 3. Covers two rows (line 1 to line 3 spans two cells).
grid-row Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2017.
Safe to use without fallbacks.
Common pitfalls
In a 3-row grid, there are 4 row lines (line 1 above the first row, line 4 below the last). grid-row: 1 / 3 does not span three rows, it spans two (from line 1 to line 3). Off-by-one confusion is the most common grid mistake.
grid-row: span 10 in a 3-row explicit grid will create 7 implicit rows to fit. The grid grows to accommodate your span, which may break your layout. Cap spans to known row counts or use explicit line numbers.
grid-row: 2 with no slash sets only grid-row-start. The end defaults to auto, giving a single-cell item. To span, always use the slash syntax: grid-row: 2 / span 2.