CSS propertyGrid
grid-area
Assigns an item to a named grid area, or sets its rows and columns all at once.
- Initial value
auto- Inherited
- No
- Animatable
- no
- Applies to
- grid items and absolutely positioned elements inside a grid container
- JavaScript
element.style.gridArea = "sidebar"
Example
#CSS
.profile {
display: grid;
grid-template-areas:
"avatar name"
"avatar level";
grid-template-columns: 56px 1fr;
column-gap: 12px;
}
.avatar { grid-area: avatar; }
.name { grid-area: name; }
.level { grid-area: level; }Example HTML
<div class="profile stage">
<div class="box avatar" style="grid-area: avatar">AC</div>
<strong class="name" style="grid-area: name">Anna Carter</strong>
<span class="level" style="grid-area: level">Level 7 · 1240 EXP</span>
</div>Preview
Definition and usage
#The grid-area property has two uses. Most often you give it the name of an area defined in the parent’s grid-template-areas, for example grid-area: sidebar, and the item lands in that spot.
It can also work as a shorthand for four lines: grid-area: 1 / 1 / 3 / 3 means, in order, the row start, column start, row end, and column end.
Named areas keep the code readable: you can see at a glance where an item lands, without counting lines.
Syntax
#Syntax
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;Values
#- An automatic spot in the grid.
<name>
The item lands in area "a" (2 × 2 cells).four lines
Rows 1-2 and columns 2-3.
Values in practice
#auto
An automatic spot in the grid.
.target { grid-area: auto; }a
The item lands in area "a" (2 × 2 cells).
.target { grid-area: a; }1 / 2 / 3 / 4
Rows 1-2 and columns 2-3.
.target { grid-area: 1 / 2 / 3 / 4; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- You write area names in
grid-areawithout quotes, but in quotes insidegrid-template-areas. - The order of the four values is: row start, column start, row end, column end. It’s easy to confuse with the order used for margins.
Related entries
#Spotted a mistake or missing an example? Write to us.