grid-template
A powerhouse shorthand that lets you define 'grid-template-rows', 'grid-template-columns', and 'grid-template-areas' all at once. Perfect for defining a full page layout in one property.
Quick example
.page-layout {
display: grid;
/* rows / columns */
grid-template: 100px 1fr 50px / 250px 1fr;
}Quick facts
Initial value
See individual propertiesInherited
No
Applies to
grid containers
Values
nonegrid-template-rowsgrid-template-columns grid-template 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+