grid-area
A shorthand property that lets you assign an element to a specific named area or set of lines within a CSS Grid, defining its position and size in one line.
It is documented as part of the CSS Grid Layout specification.
Syntax
/* Usage Example */
.main-content {
/* Spans from row line 1 to 3, and column line 2 to 4 */
grid-area: 1 / 2 / 3 / 4;
}
.sidebar{
/* Assigns the element to the named 'sidebar' area */
grid-area: sidebar;
}
/* Global values */
grid-area: inherit;
grid-area: initial;
grid-area: revert;
grid-area: revert-layer;
grid-area: unset;grid-area 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