FAQ: Advanced CSS Grid - Grid Template Areas

Frequently Asked Questions CSS FAQ
42

I have a question pertaining to grid-template-areas?
The property is displayed as such (displayed below) with text aligned to the right even in the solutions, am I supposed to write the property verbatim as displayed with text aligned to the right and how would I accomplish this?
image

43

Can i use a section name defined in the grid-template-areas in multiple rows?

lets say i want something like this pic

image

so how do i write it?

.container {
display: grid;
grid-template-areas: “header header”
“left right”
“left middle right”
“footer footer” ;
}

and then tell which section to use.

header {
grid-area: header;
}

.left {
grid-area: left;
}

.right {
grid-area: right;
}

.middle{
grid-area: middle;
}

footer {
grid-area: footer;
}

44

It’s because you typed:
“head head”

And it wants you to type in:
“header header”

The <head> which is never visible on our page, isn’t the same thing as the <header> which is found at the top of our layout.

45

“header header”
Is in there twice to let you know that the element will be spanning 2 columns.

“header header header”
This would mean that the element will be spanning 3 columns.

“left right”
This tells us that the element with the class .left will span 1 column and that on the same row, the element with the class .right will be beside it also spanning 1 column.

“left right right”
This would mean that the class .left element would still be spanning 1 column, but the class .right element would be spanning 2 columns and they would all be on the same row.
Think of the spaces between “header header header” as the end of one column and the beginning of another. So if you have 3 of the same element with a space between each, they are spanning 3 columns on the same row.

2 Likes
46

The example in this class confused me a lot so I asked the AI tool about it, here’s it’s response for anyone else who is stuck:

"The grid-template-areas property specifies the layout by naming areas and defining their positions in the grid. Each string represents a row, and each named area within the string represents a cell in the grid. Here’s how it works:

  • "header header": The header area spans two columns in the first row.
  • "nav nav": The nav area spans two columns in the second row.
  • "info services": The info area takes the first column, and the services area takes the second column in the third row.
  • "footer footer": The footer area spans two columns in the fourth row.

This layout creates a 2-column, 4-row grid. The named areas (header, nav, info, services, footer) are assigned to specific grid cells, determining how many rows and columns each area spans."

1 Like
47

They really did a poor job with the instruction here. I ended up going to YouTube and watching a bunch of videos on learning CSS Grid. Some of the so called experts on YouTube, also did a horrible job explaining CSS Grid. I like the YouTube videos from Kevin Powell and Web Dev Simplified.

1 Like
48

For those wondering, as I was, why grid-template breaks this code, I went and read the documentation; grid-template also sets grid-template-areas, so if you define grid-template below grid-template-areas, the code overwrites the previous code and breaks the site.

You can set grid-template above grid-template-areas and, presumably, set everything in one line. Still figuring out the syntax for that.

1 Like
49
50

Late to the party, but this declaration seems particularly useful in applications where you need a high degree of specificity in the placement of elements, like when creating ASSCI art, for example.