Skip to main content

grid-area Property in CSS Grid Layouts

You can use the grid-area property for the following purposes:

  1. As a shorthand for the grid-column-start, grid-column-end, grid-row-start, and grid-row-end properties.
  2. 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;
}

Try it on StackBlitz

Buy CSS Grid book

You can alternatively use the grid-area property to shorten your code like so:

.grid-item1 {
  grid-area: 3 / 1 / 5 / span 2;
}

Try it on StackBlitz

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:

.grid-item1 {
  grid-area: firstDiv;
}

.grid-item2 {
  grid-area: middleDiv;
}

.grid-item2 {
  grid-area: lastDiv;
}

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.

Tags:
Last updated on by Oluwatobi Sofela