gridtemplaterows

grid-template-rows is a CSS property used with CSS Grid Layout to define the heights of the rows in a grid container. Its value is a space-separated list of track sizes, with each size setting a row’s height. A track size can be a fixed length (for example 100px or 2em), a percentage, or a flexible unit like 1fr. Keywords such as auto, min-content, and max-content can also be used as track sizes. The minmax() function allows specifying a minimum and maximum size, such as minmax(100px, 1fr). The repeat() function helps to simplify multiple rows, for instance grid-template-rows: repeat(3, 1fr) or grid-template-rows: repeat(auto-fill, minmax(120px, 1fr)).

This property works in tandem with grid-template-columns to shape the entire grid. If more rows are created than are explicitly defined, the heights of those implicit rows can be controlled by grid-auto-rows. This makes grid-template-rows useful for establishing a vertical rhythm, keeping certain rows fixed while allowing others to grow with content.

Examples of common usage include defining a grid with a fixed header and flexible content area (grid-template-rows: 120px 1fr) or creating several equally sized rows (grid-template-rows: repeat(4, 80px)). The property is widely supported in modern browsers and is a core part of composing responsive grid layouts.