Named grid areas: the grid-template-areas property

In order to quickly outline a simple grid structure, we need to make good use of the grid-row-start/grid-row-end and grid-column-start/grid-column-end properties. This is what we did in the previous assignments. But wouldn’t you agree that it turned out to be somewhat verbose?

We have a faster way of creating a grid, and this method consists of using the grid-template-areas and grid-area properties.

Do you remember the game of “tic-tac-toe”, where we inserted 3-by-3 icons in the grid?

So, we will use the grid-template-areas property to work in a similar way. We will literally mark our future grid visually cell-by-cell.

Let’s give an example. Let’s say that we want to lay out a simple 3-by-3 grid, which consists of three columns:

In the markup, we have a container with three children elements:

<div class="grid">
  <div class="grid-element-1"></div>
  <div class="grid-element-2"></div>
  <div class="grid-element-3"></div>
</div>

We need to describe the grid areas in the CSS:

grid-template-areas:
  "red yellow green"
  "red yellow green"
  "red yellow green";

The lines in the grid-template-areas property value are nothing more than a visual representation of the rows of a grid, and the values in the lines are the representations of columns.

Ah-ha! Thus, do you now feel that you know how to create any shape grid using this method? Alas, if you said yes, then you would be wrong, since there is a slight limitation to the type of grids we can create: the grid structure must be rectangular in shape, and the number of declared columns in each line should be the same.

The names of areas should start with a letter and may include numbers and hyphens. For example, "lava lava2 lava-3" is a valid value for grid-template-areas. The names that are listed in the lines are separated by one or more spaces.

Laying out how the cells should be arranged in a grid using grid-template-areas is half the battle. Now we need to connect the visual representation with the specific elements in the HTML. The grid-area property will help us do this.

So let’s write the following:

grid-element-1, you will assigned to the red area, grid-element-2, you will be given yellow, and you, grid-element-3 will be assigned green.

.grid-element-1 {
  grid-area: red;
}

.grid-element-2 {
  grid-area: yellow;
}

.grid-element-3 {
  grid-area: green;
}

Note that the grid-area name that is assigned to each element must be unique. For example, if there are 6 grid items, then there must be 6 names for the grid-area:

grid-template-areas:
  "green green red yellow"
  "yellow2 red2 green2 yellow"
  "yellow2 red2 green2 yellow";

And then you need to spell out its grid-area name for each element ranging from the first to the sixth one.

Only one grid area can be assigned to an element in the HTML markup. If a single grid area is assigned several HTML elements, then only one will be valid, namely the one with the most specific declaration.

.grid-element-1 {
  grid-area: red; /* The grid area is assigned to the first element */
}

.grid-element-2 {
  grid-area: red; /* The grid area red is reassigned to the second element */
}

So, we have finally discovered the secret of how to quickly create simple grids. Shall we apply what we have learned in practice?