grid-template-rows
The number and heights of the rows of a grid.
Syntax
grid-template-rows: size size …;Values
| Parameter | Type | Description |
|---|---|---|
| auto | keyword | As tall as the content. |
| fr | fraction | A share of the free height. |
| px | length | A fixed height. |
Examples
The classic page layout — header, content and footer:
<style>
.page { display: grid; grid-template-rows: auto 1fr auto; height: 180px; gap: 4px; }
.page > * { padding: 6px; background: lavender; margin: 0; }
</style>
<div class="page">
<header>Header — auto</header>
<main>Content — 1fr takes the rest</main>
<footer>Footer — auto</footer>
</div>Notes
Rows that are not listed are created automatically; their height is set by grid-auto-rows. fr rows need a container with a known height.
See also
- grid-template-columns — The number and widths of the columns of a grid.
- grid-auto-flow — How the grid places items that have no explicit position.
- grid-template-areas — Draws the grid layout as a map of named areas.
- subgrid — A value of `grid-template-columns` and `grid-template-rows` that makes a nested grid reuse the tracks of its parent grid.
Related recipes
In the tutorial
- Grid — CSS Grid — columns and rows, the fr unit, the repeat and minmax functions, gaps and a responsive grid without media queries.