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.
Quick example
.container {
display: grid;
/* Top row 80px, bottom row takes the rest of the height */
grid-template-rows: 80px 1fr;
}Quick facts
Initial value
noneInherited
No
Applies to
grid containers
Animation type
simpleListOfLpcDifferenceLpc
Values
nonesubgrid 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.
Safe to use without fallbacks.
57+
52+
10.1+
16+