Layout
grid-auto-rows
grid-auto-rows sets the height of rows that grid-template-rows does not set, that is, the rows added automatically to fit the items.
Syntax
<track-size>+Preview
Code
.box {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 40px 1fr;
}Controls
About
Automatically added rows
When grid items do not fit in the rows written in grid-template-rows, the browser adds rows below. If no rows are written, every row is an added one. grid-auto-rows sets their height.
When the number of items is not known in advance, as in a list, a common pattern is to set only the columns with grid-template-columns and leave the row heights to grid-auto-rows.
Values
Write the row height. The values are the same as for grid-template-rows: lengths, percentages, fr, auto, min-content, max-content and minmax(). The initial value is auto, which fits the content (and grows if the box has height to spare).
minmax(48px, auto): at least 48px, taller when the content needs it. Useful for giving a list of cards a common minimum height.1fr: when the box has a set height, the rows share the leftover height equally. When it does not, every row matches the tallest content.
Several sizes repeat
With several sizes separated by spaces, the added rows use them in order and start over after the last one. 40px 1fr alternates 40px rows and 1fr rows.
The preview on this page sets display: grid and grid-template-columns: 1fr 1fr as helper declarations, with no rows set, and places four items. They split into two rows, so you can see the heights of the two added rows change.
Not covered on this page
The controls on this page don’t cover fit-content() yet, but you can type it into the code. repeat() and none are not allowed in grid-auto-rows.