FAQ: Advanced CSS Grid - Grid Template Areas

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?

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

lets say i want something like this pic


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;

grid-area: middle;

footer {
grid-area: footer;

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.

“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.