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.
Quick 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;
}Quick facts
Initial value
See individual propertiesInherited
No
Applies to
grid items and boxes within a grid container
Animation type
discrete
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.
Safe to use without fallbacks.
57+
52+
10.1+
16+