Help me to get over with this

When the viewport is 400px or more, container class should have a grid-template-areas property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.

Hey, it would be much easier to help if you put in a link to your page or codepen editor. To get the result you want just add a media query in your css file like this:
@media (min-width: 400px){
Other code here.
}
Doing this would allow you to create a grid-template-area you want for 400px and above. Hope it helps!

@media (min-width: 400px){
.container{
/* change the code below this line */
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;

  grid-template-areas:
    "header"
    "content"
    "footer";

/* change the code above this line */
}

}
I have tried this but it won’t work

@media (min-width: 400px){
.container{
/* change the code below this line */
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;

  grid-template-areas:
    "advert header"
    "advert content"
    "advert footer";

/* change the code above this line */
}

}

Your project link??For more detailed solution.