Grid Template Areas - Leonel Ngoya

Hey,
In this article, we'll see how to use the grid-template-areas property to create complex layouts. This property is one of the most powerful in CSS Grid Layout and it allows you to define named zones in a grid. These zones can then be used to position the children of the grid.

In my circle, many people avoid using CSS Grid (myself included) because it's somewhat complicated, but mostly because Flexbox is easier to understand and gets the job done. But there are cases where CSS Grid is more appropriate, and that's the case for complex layouts.

To start, I'll show you a Bento Grid (which you can find HERE) and we'll see how we would have done it with Flexbox in order to then show how easy it is with CSS Grid — particularly with the grid-template-areas property.

So, to make this Bento Grid with Flexbox we could proceed like this:

Where each color represents a div. In HTML we should have something like:

<div>
  <div>
    <div>A</div>
    <div>
      <div>B</div>
      <div>
        <div>C</div>
        <div>D</div>
      </div>
    </div>
  </div>
  <div>
    <div>E</div>
    <div>F</div>
  </div>
</div>

We notice that for a simple grid of 3 rows and 3 columns we already have a fairly complex HTML structure, which would imply many display: flex and flex-direction to reach a satisfactory result.

Now, let's take the same grid and see how we can make it with CSS Grid and the grid-template-areas property.
When you want to use this method, what I'd advise first is to draw your grid on paper or in any drawing tool (like FigJam) to better visualize the zones, and then you'll be able to name them.
In our case, we have:

I don't know if you noticed but the naming isn't random — the name you associate with a zone should represent the content of that zone, which means we can end up with 2 or more zones with the same name.

At this point you might say: "OK LN that's all great, but how do we materialize this in HTML/CSS?"
Let's start with the HTML:

<div class="grid">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
  <div class="D">D</div>
  <div class="E">E</div>
  <div class="F">F</div>
</div>

It's not a dream — unlike Flexbox, with grid-template-areas we have a very simple HTML structure, no nesting, and that's where its strength lies.
In CSS we'll have:

.grid {
  display: grid;
  grid-template-areas:
    'A B B'
    'A C D'
    'E E F';
  gap: 10px;
  height: 100vh; /* For the height of the grid */
}

.A {
  grid-area: A;
}

.B {
  grid-area: B;
}

.C {
  grid-area: C;
}

.D {
  grid-area: D;
}

.E {
  grid-area: E;
}

.F {
  grid-area: F;
}

What's happening here is that we defined the zones of our grid with grid-template-areas and then we associated each div to a zone with grid-area.

grid-template-areas:
  'A B B'
  'A C D'
  'E E F';

This part exactly represents the grid we drew — each line represents a row of the grid and each word represents a zone of the grid.

And just with that we'll have our final result looking like:

I made a YouTube video on this topic — I invite you to watch it for better understanding if you still have any doubts.

We've reached the end of this article and I hope you liked it. If so, feel free to share it on your networks and ask your questions if you didn't quite understand a point. So see you in the next article, ciao! It was LN 👋

Previous article: Flexbox part 2