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