Grid Row Track Property
Last updated: 2026-09-13
grid-template-rows Grid Row Track Property
The grid-template-rows property defines the number and height of the row tracks in a grid container. By specifying the size of each row track you control the row structure precisely. Used together with grid-template-columns, it forms the basic skeleton of the grid. It supports fixed lengths, percentages, the fr unit, and functions such as minmax().
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
grid-template-rows: none | <track-list> | <auto-track-list>;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | Keyword | No explicit row tracks |
<track-list> | Type | Row track list |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-template-rows | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： Combined with a fixed container height, 1fr lets a middle row fill the remaining space automatically - a classic trick for page layouts.
Tip： The auto keyword sizes the row from its content, which suits rows of varying height.
❓ FAQ
QDoes grid-template-rows require a fixed container height?
ANot necessarily. Without an explicit container height, the row tracks default to auto and are stretched by the tallest item content in that row. Only when you distribute the row heights proportionally with units such as fr does the container need a definite height as the basis for the calculation; otherwise fr degrades to the content height. Full-page layouts often give the container height: 100vh or a fixed height and use auto 1fr auto for the header, main and footer skeleton.
QHow do I make the row heights adapt to the content?
AWrite the row track size as auto, or simply omit grid-template-rows; each row height is then decided by its content - more content means a taller row. To enforce a minimum height, use grid-auto-rows: minmax(100px, auto), which keeps the rows at least 100px and lets them grow with the content. Note that the fr unit distributes the height proportionally and cannot adapt to the content.
QWhat does grid-template-rows: auto 1fr auto mean in a full-page layout?
AThis is the classic header-main-footer layout: the first row’s auto height is decided by the header content, the second row’s 1fr absorbs all the remaining container height so the main area stretches with the container, and the third row’s auto height comes from the footer content. Combined with grid-template-columns and a container height of 100vh, it produces a full-page skeleton where the main area is fluid while the header and footer never overflow.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Grid Column Tracks
Defines the structure of grid columns
Grid Shorthand
Shorthand that defines a grid in one declaration
