I have header and footer occupying top and bottom rows

HTML-CSS
1

I have the header and footer occupying the entire top and bottom rows respectively and have the middle row set as having the ads on the left column and the content on the right column with an empty cell in the middle.

Why is it not passing? What am I doing wrong (or what am I not doing, if that?)


<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{
    grid-template-areas:
    /* Only change code below this line */
      "header header header"
      "advert . content"
      "footer footer footer"
    /* Only change 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>

Browser information:

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

Challenge: Use Media Queries to Create Responsive Layouts

Link to the challenge:

2

It is a two column grid, not three.

3

I did this:

 @media (min-width: 400px){
    .container{
      grid-template-areas:
      /* Only change code below this line */
        "header header"
        "advert content"
        "footer footer"
      /* Only change code above this line */
    }
  }

But that also doesn’t pass. It’s two columns and three rows now, right? So what am I still doing wrong?

Edit: Okay, seems something else was wrong. I reset all code and tried again and it worked. Thanks.

4

Good to hear. You were missing the semicolon BTW.