CSS propertyGrid
grid-template-rows
Defines the grid’s rows: their number and heights.
- Initial value
none- Inherited
- No
- Animatable
- yes, when only the values change while the number of rows stays the same
- Applies to
- grid containers
- JavaScript
element.style.gridTemplateRows = "auto 1fr auto"
Example
#CSS
.page {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 200px;
}Example HTML
<div class="page stage" style="gap: 8px;">
<header class="box">Header</header>
<main class="box">Content stretches to fill the free space</main>
<footer class="box">Footer always at the bottom</footer>
</div>Preview
Definition and usage
#The grid-template-rows property works like grid-template-columns, but for rows. Each value is the height of the next row: a length, a percentage, fr, auto, or the minmax() function.
Rows in fr make sense once the container has a defined height. A classic example is the page layout auto 1fr auto: a header and footer sized to their content, with the middle filling the rest of the screen.
If there are more items than defined rows, the browser adds implicit rows with the height from grid-auto-rows.
Syntax
#Syntax
grid-template-rows: none | <track-size>+ | repeat(…) | subgrid;Values
#- No explicit rows. The height comes from the content.
- The first row is 40px, the second takes up the rest of the height.
- The second row is twice as tall.
- Two rows of equal height.
Values in practice
#none
No explicit rows. The height comes from the content.
.demo { grid-template-rows: none; }40px 1fr
The first row is 40px, the second takes up the rest of the height.
.demo { grid-template-rows: 40px 1fr; }1fr 2fr
The second row is twice as tall.
.demo { grid-template-rows: 1fr 2fr; }repeat(2, 1fr)
Two rows of equal height.
.demo { grid-template-rows: repeat(2, 1fr); }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- The
auto 1fr autolayout withmin-height: 100dvhpins the footer to the bottom of the screen even on short pages. - Rows in
frneed a defined container height, otherwise they behave likeauto.
Related entries
#- grid-template-columnsDefines the grid’s columns: their number and widths.
- grid-auto-rowsSets the height of the rows the grid creates automatically.
- grid-templateA shorthand that sets the grid’s rows, columns, and named areas in one declaration.
- row-gapSets the spacing between rows in a flex or grid container.
Spotted a mistake or missing an example? Write to us.