grid-template-rows
Defines the height of each row in a grid. You can set fixed heights, use percentages, or the 'fr' unit to fill available vertical space.
It is documented as part of the CSS Grid Layout specification.
Syntax
/* Usage Example */
.container {
display: grid;
/* Top row 80px, bottom row takes the rest of the height */
grid-template-rows: 80px 1fr;
}
/* Syntax */
grid-template-rows: none;
grid-template-rows: subgrid;
/* Global values */
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: revert;
grid-template-rows: revert-layer;
grid-template-rows: unset;grid-template-rows Browser support
Widely available
Since
2017 95% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2017.
57+
52+
10.1+
16+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more