"CSS: Grid | 2.Grid Template Areas" Problems and Confusion

Hi Everyone,
I know this shouldn’t be under “Community” but I couldn’t find the tag I wanted. Oh well.
So–grids! Great! And confusing.
The problem I’m having is in the first excersise of “Learn CSS: Grids| Grid Template Areas”. Here is the link. The instructions are:


In style.css, add the grid-template-areas property to the .container rule set.
Its value should create a 2-column, 4-row layout with these areas:
~header (spans two columns in the first row)
~ nav (spans two columns in the second row)
~left (spans one column on the left in the third row)
~right (spans one column on the right in the third row)
~footer (spans two columns in the fourth row)

So I type in:


.container {
display: grid;
max-width: 900px;
position: relative;
margin: auto;
grid-gap: 10px;
grid-template-areas:“head head”
“nav nav”
“left right”
“footer footer”;
h1, h2 {
font-family: monospace;
text-align: center;
header {
background-color: dodgerblue;
grid-area: head;
nav {
background-color: beige;
grid-area: nav;
.left {
background-color: dodgerblue;
grid-area: left;
.right {
background-color: beige;
grid-area: right;
footer {
background-color: dodgerblue;
grid-area: footer;

And I get this error message:

Error Message

Your code should include grid-template-areas: “header header” “nav nav” “left right” “footer footer”;.

So help! I am utterly befuddled!

head != header, the instructions ask to name it header, you use head, this is not the same, so you get an error

1 Like

ooh. ok. let me try again

It works! Hooray! Thanks.