Grid-row
Learn item placement across rows with grid-row.
grid-row: placement across rows
Just like grid-column, grid-row decides where an element sits along the row axis. The value again uses line numbers: grid-row: 1 / 3 places the item from row line 1 to row line 3.
This is useful when a banner or poster should cover two rows vertically. A tall side menu can also span multiple rows.
Vertical span in practice
A side menu on the left of the grid can cover all rows: grid-row: 1 / span 3 starts it at line 1 and keeps it three rows tall. The main content stays in a single row.
This replaces the old table layout approach; even if the row count changes, the menu always reaches the bottom. It also adapts easily in responsive design.
Sidebar and main content
On a blog page the sidebar usually sits left or right and reaches as far as the main content. With grid-row: 1 / span 4 the sidebar starts at line 1 and spans four rows; the main content fills cells one by one.
This balance builds the visual rhythm of the page. The longer the sidebar, the more the reader's eye lingers at the edge; that's why key menus go there.
Exercise Place the banner to span two rows
The ad .banner element should start at row line 1 and span 2 rows. Write only the grid-row declaration inside the .banner rule.
Show example solution
.banner {
grid-row: 1 / span 2;
}Test yourself
-
What does grid-row: 1 / span 2 mean?
.banner { grid-row: 1 / span 2; }- Show row 1 twice
- Hide row 1, show row 2
- Start at row line 1 and span 2 rows
- Merge row lines 1 and 2
Show answer
Start at row line 1 and span 2 rows — Correct. It starts at line 1 and span 2 covers two rows.
-
Make the banner span two rows
.banner { grid-row: 1 / ____; }Show answer
.banner { grid-row: 1 / span 2; } -
Match each grid-row value to its meaning
- grid-row: 1 / 3
- From row 1 to row 3
- grid-row: 1 / span 2
- From line 1, span 2
- grid-row: 2 / 4
- From row 2 to row 4
- grid-row: auto
- Automatic placement