CSS Grid: Divide the Grid Into an Area Template, There is no change in the out put

Hi all
I know the answer of challenge already. That is
grid-template-areas:
“header header header”
“. content content”
“footer footer footer”;

But what is I don’t understand is why I don’t any see change in the output even when write the answer and run it.

I must mention that I don’t see any merged cell in the output before and after running the solution too.

it seems grid-template-areas: has no effect on the output.

Have you defined the grid areas?
Like this for example

.blah {
grid-area: header;
}

Yes
it’s my code:
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
/* change code below this line */

grid-template-areas:
  "header header header"
  ". content content"
  "footer footer footer";
/* change code above this line */

}

and it’s the result on the output:

Oh, I see. Perhaps reload the page and do it again?

No, wait. I don’t see the declarations of header, footer items etc.
It looks like there’s something missing.

The only thin you have to do is replace advert by .

Don’t change anything else and it should be ok.

yep it’s correct you don’t see the difference yet. because the styles of the items are not changing, and are not assigned to the specific grid area’s (header, footer, etc )

It will make more sense when you continue to the next challenge I think, because then you will assign the items to the specific grid area’s.

1 Like

Thanks a lot.
I got it.:grinning:

1 Like