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.
It is documented as part of the CSS Grid Layout specification.
Syntax
/* Usage Example */
.page-layout {
display: grid;
/* rows / columns */
grid-template: 100px 1fr 50px / 250px 1fr;
}
/* Syntax */
grid-template: none;
grid-template: grid-template-rows;
grid-template: grid-template-columns;
/* Global values */
grid-template: inherit;
grid-template: initial;
grid-template: revert;
grid-template: revert-layer;
grid-template: unset;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.
57+
52+
10.1+
16+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more