Use Media Queries to Create Responsive Layouts 1

Tell us what’s happening:

Please help me am stucked

Your code so far


<style>
  .item1 {
    background: LightSkyBlue;
    grid-area: header;
  }
  
  .item2 {
    background: LightSalmon;
    grid-area: advert;
  }
  
  .item3 {
    background: PaleTurquoise;
    grid-area: content;
  }
  
  .item4 {
    background: lightpink;
    grid-area: footer;
  }
  
  .container {
    font-size: 1.5em;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50px auto 1fr auto;
    grid-gap: 10px;
    grid-template-areas:
      "header"
      "advert"
      "content"
      "footer";
  }
  
  @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-areas:
        "advert header"
        "advert content"
        "advert footer";
    
    /* change the code above this line */
    }
  }
</style>
  
<div class="container">
  <div class="item1">header</div>
  <div class="item2">advert</div>
  <div class="item3">content</div>
  <div class="item4">footer</div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

Link to the challenge:

I am stuck on this one too, I tried inputting grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto; still nothing.

I figured it out. grid-template-areas:
“advert header”
“advert content”
“advert footer”;

change “advert header” to " header header"
and " advert footer" to " footer footer"

8 Likes

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 */
}

}

header
advert
content
footer

Hey @dem1968, the answer should be:

@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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. For the second row we need to occupy our first column with advert and the second column with content. Done by “advert content” area.
  7. 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.
10 Likes

You should take a look at this page:

Designing for mobile first will help a lot.

2 Likes

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. :slight_smile: Thank You

1 Like

Thank you for the detailed explanation. Much appreciated.

You are welcome.:grinning: :grinning:

Thank you for putting in the time for this thorough explaination. Cheers

+1 for your time and great explanation!