Huh, this took a toll on me.
I am also pretty new to CSS-Grid and haven’t started the challenges but trying many variation finally solved this challenge.
Let me clearly explain, so others can benefit from this.
Problem
When the viewport width is 400px or more, make the header area occupy the top row completely and the footer area occupy the bottom row completely.
- Header and footer should occupy full width.
- Advert & Content to occupy equal space.
This is how you need to spread the grid-area.
Hint:
Add grid-template-columns: auto;
Update the code for grid-template-areas to pass the test.
Spoiler Alert: (don’t click this unless you have tried and failed)
{
grid-template-columns: auto;
grid-template-areas:
“header header”
“advert content”
“footer footer”;
}