I am stuck on my 2nd to last question in the css grid challenges titled below. I have tried to find hints for how to do this there isn’t one and there also isn’t a video any example or help with this problem greatly appreciated.
## CSS Grid: Use Media Queries to Create Responsive Layouts
CSS Grid can be an easy way to make your site more responsive by using media queries to rearrange grid areas, change dimensions of a grid, and rearrange the placement of items.
In the preview, when the viewport width is 300px or more, the number of columns changes from 1 to 2. The advertisement area then occupies the left column completely.
***this is the challenge below ***
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.
So there are only 2 things you need to change in the grid-template-areas:
header
footer
You only need to change the grid-template-areas property, so that only the header occupies both columns in the first row (top) and the footer occupies both columns in the third row (bottom).