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

HTML-CSS
1

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.

2

Have you defined the grid areas?
Like this for example

.blah {
grid-area: header;
}

3

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:

output
output1024×768 227 KB

4

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.

5

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
6

Thanks a lot.
I got it.:grinning:

1 Like