Just like grid-column, grid-row uses numbered grid lines along the vertical axis, starting at 1, with a value like grid-row: 1 / 3 placing an item starting at row line 1 and spanning down to row line 3, covering the two row tracks in between. The span keyword works identically too, grid-row: 2 / span 2 starting an item at row line 2 and having it span downward across 2 row tracks — combining grid-column and grid-row together on the same item is how a specific grid item gets placed into an exact rectangular region spanning both a specific column range and a specific row range simultaneously.
1Understanding Grid-row
Just like grid-column, grid-row uses numbered grid lines along the vertical axis, starting at 1, with a value like grid-row: 1 / 3 placing an item starting at row line 1 and spanning down to row line 3, covering the two row tracks in between. The span keyword works identically too, grid-row: 2 / span 2 starting an item at row line 2 and having it span downward across 2 row tracks — combining grid-column and grid-row together on the same item is how a specific grid item gets placed into an exact rectangular region spanning both a specific column range and a specific row range simultaneously.
Combine grid-column and grid-row together on the same item, rather than relying on just one of them alone, whenever an item needs to span a specific rectangular region across both axes simultaneously, like a large featured item spanning both multiple columns and multiple rows.
.featured {
grid-column: 1 / 3;
grid-row: 1 / 3;
}2Practical Example
Here is a real-world application of Grid-row showing how it is used in production CSS code.
.sidebar {
grid-row: 1 / span 3;
}3Best Practices
Follow these guidelines when working with Grid-row:
1. Use grid-row alongside grid-column together for precise two-dimensional placement of an item into a specific rectangular region of the grid
2. Use grid-row: start / span number for spanning a specific number of rows starting from a given line, mirroring grid-column's own span syntax
3. Remember row lines are numbered the same way as column lines, starting from 1, with the numbers referring to the lines between tracks, not the tracks themselves
Tip: Combine grid-column and grid-row together on the same item, rather than relying on just one of them alone, whenever an item needs to span a specific rectangular region across both axes simultaneously, like a large featured item spanning both multiple columns and multiple rows.
.featured {
grid-column: 1 / 3;
grid-row: 1 / 3;
}