Grid areas

Grid areas are a great tool when you have more complex layouts, especially if there are some peices that need to be moved around at different sizes.

We created areas by using grid-template-areas, and then we create a name for each area in our grid.

.grid-areas {
  display: grid;
  gap: 12px;

  grid-template-areas:
    "area-one area-two"
    "area-three area-four";
}

Doing this will create a grid with 2 columns and 2 rows. The first row has area-one and area-two as columns, and the second row has the area-three and area-four.

This isn’t a very complex layout, but where things get more interesting is when you extend an named area across multiple cells.

.grid-areas {
  display: grid;
  gap: 12px;

  grid-template-areas:
    "area-one area-one area-one"
    "area-two area-three area-four"

}

Assigning elements to specific areas

If we create a grid using the above code, we’ll have a grid with three columns and two rows, but any content we add to it will simply flow like it normally would in a grid. We need to use the grid-area property to assign elements to specific areas.

.grid-areas {
  display: grid;
  gap: 12px;

  grid-template-areas:
  'area-one area-one area-one'
  'area-two area-three area-four'

}

.item-one {
  grid-area: area-one;
}

.item-two {
  grid-area: area-two
}

/* etc. */

This really pays off when we are rearranging the layout at different screen sizes

We’re going to talk more about responsive design in a little bit, but we can’t talk about grid-template-areas without mentioning it. Setting up areas takes a bit of work, between creating the areas and then assigning elements to each area, but that effort is worth it if the layout ever has to change.