Layout
grid-template-rows
grid-template-rows sets how many rows a grid container has and how tall each one is. It works like grid-template-columns: write the row sizes (tracks) from top to bottom.
Syntax
none | <track-list> | <auto-track-list> | subgrid <line-name-list>?Preview
Code
.box {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 2fr;
}Controls
About
Values
Write the row heights from top to bottom, separated by spaces (grid-template-rows: 1fr 2fr).
none: no rows are set. This is the initial value. Rows are created to fit the items, with heights fromgrid-auto-rows(initiallyauto).- Lengths and percentages: a fixed height. Percentages are of the height of the box's content.
fr: shares the height left over after fixed rows and gaps, in the ratio of the fr values.auto,min-contentandmax-content: the height comes from the content.minmax()andrepeat(): work as ingrid-template-columns.
When the box has no set height
fr shares out leftover height, so there is nothing to share when the box's height is not set. A box without a height is as tall as its content: fr rows keep their ratio but only grow enough to fit their content, and percentage rows act like auto. A page split into header, main and footer with grid-template-rows: auto 1fr auto needs a height on the box, such as min-height: 100vh, so the main row has room to grow.
The preview on this page sets display: grid and grid-template-columns: 1fr 1fr as helper declarations, placing four items in two rows and two columns. The box has a set height, so you can see fr share it out.
Rows grow with the items
By default items fill each row from left to right (grid-auto-flow: row), so items that do not fit in the rows you wrote get new rows below. Their heights come from grid-auto-rows.
Not covered on this page
Line names ([header-start] auto [header-end]), fit-content() and subgrid are not covered by the controls on this page yet, but you can type them into the code. They mean the same as in grid-template-columns.