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 Editing It

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

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

Try Editing It

CodeSweetly ads

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

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

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

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

HTML

<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.