grid-template-areas
Allows you to design a grid layout using 'named areas'. You can draw a visual map of your page using strings, making complex layouts much easier to read.
Quick example
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
header { grid-area: header; }
main { grid-area: main; }
sidebar { grid-area: sidebar; }
footer { grid-area: footer; }Quick facts
Initial value
noneInherited
No
Applies to
grid containers
Animation type
discrete
Values
none grid-template-areas 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+