grid-row places a grid item between horizontal grid lines. Its two values identify the starting and ending lines, so grid-row: 2 / 3 places an item in row 2. section 4.2.1
A grid cell lies between four lines: vertical lines bound its column, while horizontal lines bound its row. grid-row is shorthand for grid-row-start and grid-row-end, and CSS Grid numbers lines from 1 rather than 0. section 4.2.1
Place an item in the second row
.item { grid-column: 3 / 4; grid-row: 2 / 3; } The item occupies the cell between horizontal lines 2 and 3. To span multiple rows, choose a later ending line, such as grid-row: 1 / 3. section 4.2.1
Use line coordinates to keep placement precise:
- Use ordinary positive line numbers when the grid structure is known. section 4.2.1
- Use negative line numbers when placement should track an edge that remains meaningful as rows change. section 4.2.3
- Use grid-row: -2 / -1 to occupy the final row, from the second-last horizontal line to the last. section 4.2.3
Listing 4.3 Placing an item as the last row of the grid container
.total-row {
grid-column: 1 / -1; #1
grid-row: -2 / -1; #2
}
A complete example combines grid-column: 1 / -1 with grid-row: -2 / -1 to create a row that remains at the grid’s bottom edge. section 4.2.3
