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.
It is documented as part of the CSS Grid Layout specification.
Syntax
/* Usage 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; }
/* Syntax */
grid-template-areas: none;
/* Global values */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: revert;
grid-template-areas: revert-layer;
grid-template-areas: unset;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.
57+
52+
10.1+
16+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more