Grid area placement

A young man has a well baked cake. He has 3 children asking him to give them some portions. Ideally, who shares the cake?

The young man!

The young man cuts out the areas and gives them to his children.

Here’s why I told that sweet story.

Like the cake, the entire grid area is owned by what element?

The grid container!

Like the young man, the grid container has 3 children too .aside, .main and .footer.

Now the grid container gets to choose how the entire area portions are shared.

One more thing.

Because the children all have names, the young man may say, “hey Brian, here’s your portion”, or “hey Emma, have this”

It is easy to identify who owns what portion of the cake by assigning the portions to a named individual.

I have no cure for you if you live in a country where people go without names 😁

The grid items all have names! We did so using the grid-area property.

Now, let’s share the cake!

The grid-template-areas property

Now the grid container must share the “cake” i.e assign what area portions goes to who.

There are many ways to do what I am about to explain to you, but the grid-template-areas property is the easiest to reason about.

It is the bit you need to know for efficiency.

How does the grid-template-areas property work?

Take a look at the code below:

body {
      grid-template-areas: "sidebar  content"
                           "footer   footer";
}

😳 what the heck is that ?

That, my dear is the grid-template-areas property in action. There’s no need to get overwhelmed. In this lesson, I will explain how it works — in clear terms.

The grid-template-areas property (what a long property name) provides a very visual structure of the grid.

Take a look at the code again:

body {
      grid-template-areas: "sidebar  content"
                           "footer   footer";
  }

Note that the entries in the property value are the names of the grid items!