Stuck in CSS grid exercice: Use Media Queries to Create Responsive Layouts

Stuck in CSS grid exercice: Use Media Queries to Create Responsive Layouts

Ok I understand better now but I don’t know what to code inside grid-template-columns property in this exercice…How can I determine that I am placing the header and footer at the top, for example given their name in grid-template-areas??


I struggled with that at first, but once you get your head round it, it is not that tricky. This is a bit of the code from the grid template areas:

          column  column
row       advert  header
row       advert  content
row       advert  footer

The above will create an advert that will take up an entire column. If we wanted to make an advert span an entire row, we could do something like this:

        column column
row     advert advert

All you need to do is work out how to change the code so that the header takes up the entire first row (you could think about it as the header taking up two cells) and how to make the footer take up the entire bottom row. Have a go and try to code a solution, if you can’t get it to pass the tests, then paste you code and we can see where your understanding is at so we can be of further help :slight_smile:

Hope this helps :slight_smile:


I managed to make it work! It was so simple! All I had to do was rearrange the grid-template-areas content and it worked.

For example: header header
advert content
footer footer


Initially I was looking to code wome properties with grid-template-columns and grid-template-rows, but I missed the point.

Now I got it.It’s a visual represnetation of how celles are arranged (a map). Got it.

On to the next exercice and thank you!


Excellent work getting it all sorted.

That’s the beauty of coding - if you just keep at it, eventually you will figure it out. It just takes practice, but over time it gets a lot easier.


I read in many forums and on Internet people say that with time coding gets more complex and harsh as you dig in, and that coding in general is tough.You say that it gets easier with time…So what is the truth, or is really subjective?


Excellent question!
But, you are the only person who has your answer.
It’s all in the art of finding what will work to give you the results you are looking for. If you enjoy the challenge, then it gets easier, if you don’t as you dig in I think it could get harder.
It’s all up to you, nobody else. :wink:


Hi there! If anybody is struggling with understanding this exercise I recommend watching this video from Rachel Andrew in which the concept of grid-template-areas is explained in 4 minutes.

1 Like

Hi all,

This is had me stuck for a bit as well I was too busy focusing on the ‘grid-template-columns’ instead of looking at rearranging the ‘grid-template-areas’ . My code is below:

grid-template-columns: 1fr 1fr;
    "header header"
    "advert content"
    "footer footer";

I hope this helps

1 Like

wow it was so simple lol


I’ve read and re-read this entire thread, and there is still one thing I’m not understanding. I’ve passed the exercise by simply changing grid-template-areas to “header header” and “footer footer”. But, I’m more interested in learning best practices, not necessarily just the thing that will get me to pass this challenge. Would it be best practice to also make changes to grid-template-column and grid-template-row properties? The example code (pasted below) seems to imply that something needs to be done with those. However, it doesn’t appear to be a requirement to pass the exercise.

@media (min-width: 300px){
      grid-template-columns: auto 1fr;  
      grid-template-rows: auto 1fr auto;
        "advert header"
        "advert content"
        "advert footer";


That challenge was just a very brief intro to grid. If you’re feeling there’s more than just that then you are correct.

A transition from 17" monitor to tablet size might just require that you reallocate the space on your existing grid as in the example.

Usually at very small screen sizes, yes, you would likely re-dimension the rows and columns probably to stack vertically one atop the other and maybe hide some less important content in a drop down menu.

Now that gigantic monitor screens are becoming the norm you also have to consider that your content may become too wide on some desktops so you might need a provision for a wider margin or more columns.

You might benefit from playing around with making mock templates from scratch that rearrange to look good at different screen sizes. I use CodePen for this since many examples are already on CodePen I can just fork them.

grid-template-columns and -rows sets the relative dimensions of your grid

grid-template-areas sets what content occupies those grid cells

1 Like

Thanks man. This helped me understand it better too and also get past the challenge.


Thank you! This helps, and I appreciate your clarification. I’ll take a look at the pens you recommended.


Whao, i have been stuck here as well. Thanks for the solution.


Thank you , everyone. I was having issues with this and I get it now. I was way overthinking it.


Thank you for the help oliver! :slight_smile:


Thx for the solution, I was stuck here as well. But I get it now, with your map comment. Makes total sense now.


I was stuck as you for so long.
Thank you.
You helped me so much.


You made grid-template-area so simple.
It took time for me to get it. Now, I understood it very clearly.
Like how you explained.
Thank you.


I liked the MDN web doc thread.