grid-area Property in CSS Grid Layouts
You can use the grid-area property for the following purposes:
- As a shorthand for the
grid-column-start
,grid-column-end
,grid-row-start
, andgrid-row-end
properties. - To specify a grid item's name.
Let's discuss the two purposes below.
How to Use grid-area
as a Shorthand
Here is the syntax for using the grid-area
property as a shorthand for the grid-column-start
, grid-column-end
, grid-row-start
, and grid-row-end
properties:
.your-grid-item {
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
}
Therefore, instead of writing:
.grid-item1 {
grid-row-start: 3;
grid-row-end: 5;
grid-column-start: 1;
grid-column-end: span 2;
}
You can alternatively use the grid-area
property to shorten your code like so:
.grid-item1 {
grid-area: 3 / 1 / 5 / span 2;
}
How to Use grid-area
to Specify a Grid Item's Name
Here is the syntax for using the grid-area
property to specify a grid item's name:
.your-grid-item {
grid-area: item-name;
}
Here's an example:
- CSS
- HTML
.grid-item1 {
grid-area: firstDiv;
}
.grid-item2 {
grid-area: middleDiv;
}
.grid-item2 {
grid-area: lastDiv;
}
<section>
<div class="grid-item1">1</div>
<div class="grid-item2">2</div>
<div class="grid-item3">3</div>
</section>
Using grid-area
to define a named grid item allows your grid container's grid-template-areas
property to use the name to set the item's size and location.
Overview
This article discussed what a CSS grid-area
property is. We also used examples to see how it works.