Grid-template-rows
Learn the row structure with grid-template-rows.
Draw the row structure
The grid-template-rows declaration lists row heights in order; just like grid-template-columns. Each value maps to one row track. grid-template-rows: 100px 200px creates two rows; the first is 100 pixels tall, the second 200 pixels.
The row count does not have to match the child count. If there are more children, the browser adds implicit rows; we will cover that later.
Row sizing options
Row heights accept three common values: fixed (100px), flexible (1fr) and auto. auto makes the row as tall as its content; as text grows, the row grows with it.
A header + content layout is often built as grid-template-rows: auto 1fr: the top row sizes to the header, the bottom row fills the remaining height. The layout then holds even when the screen changes.
Exercise Dashboard grid: columns and rows together
Define both columns and rows for .dashboard. Add display: grid, grid-template-columns: 1fr 2fr and grid-template-rows: auto auto.
Show example solution
.dashboard {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto auto;
}Test yourself
-
What does grid-template-rows define?
.board { display: grid; grid-template-rows: 80px auto; }- The column count
- The column widths
- The row heights
- The gap between cells
Show answer
The row heights — Correct. grid-template-rows defines row heights in order; here 80px and auto.
-
Fixed header, flexible content
.page { display: grid; grid-template-rows: ____; }Show answer
.page { display: grid; grid-template-rows: 100px auto; } -
Match each row value to its meaning
- auto
- Size to content
- 1fr
- Share remaining height
- 100px
- Fixed pixel height
- 80px 1fr
- Fixed header + flex body