I don’t understand what are media queries in CSS grid system. Are media queries specific instructions or just a concept? I can’t do the exercice because I don’t understand what is asked from me.
Media queries are really nothing to do with the grid system. CSS grid can make it easy to layout a webpage, and through using media queries it can be easy to make the page look good on different size screens. A media query can take a bit of thinking about (you don’t need to though for this challenge as the code is already provided.), but the main idea is this:
.header {
width: 100%; // on small screens such as iPhone, header width is 100%
}
@media (min-width: "iPhone(etc) screen width in pixels") {
.header {
width: 50%; // on screens larger the iPhones set header width to 50%
}
The basic idea is the layout needs to be different depending on the screen size and media queries allow us to do this. Have a play with the width of the webpage view (i.e the right part of the challenge page) and see how the content changes with and without the media queries in place.
I hope this clarifies it, but if you get stuck, come back and I’ll try to help.
Thanks but I’m still stuck. I don’t understand how media queries work
The exercice is “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.”
I have to use grid-template-rows and grid-template-columns in the container?
The instructions to the challenge are a little unhelpful if you are new to the CSS grid and media queries. Hopefully the link will help with understanding media queries. There is an example of a working media query in the code:
//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.
@media (min-width: 300px){// when screen is larger than 300px wide
.container{//change container class
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"advert header"//make advert take top left cell
"advert content"//make advert take middle left cell
"advert footer";//make advert take bottom left cell
}
}
The code you need to change is here:
@media (min-width: 400px){//when screen is larger than 400px wide
.container{//change the container class
/* change the code below this line */
grid-template-areas:
"advert header"//****you will need to change this line****
"advert content"
"advert footer";//****you will need to change this line****
/* change the code above this line */
}
}
This might be a bit of an oversimplification, but here it goes…
A query itself is just a request for information. For example, a database query requests information from the database based on a specific set of parameters. A media query takes the parameters that you specify (i.e. screen, min/max screen-width, etc.) and applies the CSS when those conditions apply.
the CSS inside of that query will apply as soon as the screen is any size less than 401px. In this case, any h1 text will be purple. Once you view the page on a larger screen, say 405px, the text will revert back to the original color that you specified outside of the query (or the default color if one was not specified).
You can modify pretty much anything. You just have to say what you want the page to look like at that particular size and add your CSS accordingly.
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??
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
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.
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.
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:
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.
Hi,
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