Hello,
I am also stuck on this. I don’t understand why my code isn’t passing the test. I 'm thinking that the 1fr will create 1 column. I also thought that the row auto 1fr auto would have 3 rows with the first row with the 1fr for the “header”, the second row… I can’t reason it all out. Frustrated and ready to learn what I don’t know. There is something here that I’m just not getting. All help welcome. Thanks,
@media (min-width: 300px){
.container{
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
“advert header”
“advert content”
“advert footer”;
}
}
@media (min-width: 400px){
.container{
/* change the code below this line */
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"advert header"
"advert content"
"advert footer";
/* change the code above this line */
}
@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 header"
"advert content"
"footer footer";
/* change the code above this line */
}
}
Let me take you through the code step by step. I assume that you understand media queries very well. So, I will concentrate only on the grid part:
First think about what your layout should be like. According to the question the top row should be entirely covered by header, the middle row should be divided between advert and content and your third row should be covered by footer.
Although you might be tempted to think that it is a single column layout since the header and the footer will occupy one entire row,It is actually a double column layout as the middle row would require to have 2 column, one for the advert and the other for the content.
Now you know that it is a two column layout, so, we will create the columns with grid-template-columns: auto 1fr; The width of the first column will be automatically adjusted according to the content width and the remaining space will be allotted to the second column.
Since, it is a three row layout, so, we will create the rows with grid-template-rows: auto 1fr auto; The width of the first row will be automatically adjusted according to the content width, similar is the case for the third row and the remaining space will be allotted to the second row.
Now we have to create the grid areas which will be occupied by our website component. Now for the first row we have two columns and we need our header to occupy this entire row, so our header has to occupy both the column we defined earlier. This is done by putting "header header" as the first row under grid-template-areas.
For the second row we need to occupy our first column with advert and the second column with content. Done by “advert content” area.
The third row is similar to 1st row i.e the footer has to occupy both the columns and done in a similar fashion by defining "footer footer" area.
That’s it. Hope this helps. Let me know if I am unclear about some thing. Thanks.
WOW! Thank you both so much. I can see it now and it works. I’ll definitely check out the MDN to gain more knowledge and to see the techniques used for using Grid Layout. I can breath again. Thank You
Thank You