Let’s talk about the CSS Grid’s “Grid Areas” feature

In CSS Grid-based layouts – The default in placing elements in the grid itself is by defining the rows, or in fact, defining the grid lines according to which elements will start and end.

The Grid Area feature is an alternative to setting grid lines and offers a visual way to name areas in the grid so that elements easily fit into areas by those names. It might be a bit confusing at first, but very quickly you will realize the power that the Grid Areas property provides.

Assigning Names to Areas with the grid-area Property

The first thing to do is to define names (as you see fit) for the elements in the grid (Grid Items) using the grid-area property:

.item-1 {
  grid-area: head;
}
.item-2 {
  grid-area: main;
}
.item-3 {
  grid-area: side;
}
.item-4 {
  grid-area: footer;
}

Describing the Layout Using grid-template-areas

After assigning names to areas you need to use the grid-template-areas property on the grid container to define how those areas, to which you assigned names, will be applied:

.container {
  display: grid;

  grid-template-columns: 2fr 2fr 1fr 2fr;
  grid-template-rows: 100px 200px 100px;

  grid-template-areas:
    "head head . side"
    "main main . side"
    "footer footer footer footer";
}

The value of grid-template-areas allows you to use ASCII art. Each set of double quotation marks represents a row, and each word represents a column. The period character (.) represents an empty cell in the grid, and you can use consecutive periods for convenience.

Spaces are not relevant, and you can format it as you wish. Here’s the exact same example as above:

.container {
  /* ... */

  grid-template-areas:
    "head head     .....    side"
    "main main     .....    side"
    "footer footer footer footer";
}

The result of this code will look like this:

Now let’s play with the value of grid-template-areas to get a completely different result, all without touching the properties of the grid-items that we initially set. The following example may not be particularly useful, but it demonstrates the power of grid-template-areas:

.container {
  /* ... */

  grid-template-areas:
    "head head  .    side"
    "main main main  side"
    ". footer footer side";

  /* ... */
}

What About Responsiveness and Grid Areas?

It’s simpler than you think. In fact, one of the significant advantages of Grid Areas is when you use Media Queries. You can achieve fully responsive layouts with just one property change:

@media screen and (max-width: 40em) {
  .container {
    grid-template-areas:
      "head head head head"
      "main main main main"
      "side side side side"
      "footer footer footer footer";
  }
}

Notice the change in the element positions without needing to touch the source. If you’re not viewing this on a mobile device, try resizing your browser to see the result:

Regarding Media Queries – take a look at a cool post about Responsive Layout with No Media Queries…

Thanks to Alligator.io for the post.