Last Task with Grids

**Actually I have accomplished that task. But as I tried to figure it out better I didn’t understand why my Grid within Grid appeared vertical. I have watched the explanation video and saw that the last Grid has appeared horizontal. It just made me really curious why it doesn’t appear both (in my coding and in explanation video) horizontal or vertical. **

**
.container {
font-size: 1.5em;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
grid-gap: 10px;
grid-template-areas:
“advert header”
“advert content”
“advert footer”;
}
.item1 {
background: LightSkyBlue;
grid-area: header;
}

.item2 {
background: LightSalmon;
grid-area: advert;
}

.item3 {
background: PaleTurquoise;
grid-area: content;
/* Only change code below this line */
display: grid;
grid-template-columns: auto 1fr;

/* Only change code above this line */

}

.item4 {
background: lightpink;
grid-area: footer;
}

.itemOne {
background: PaleGreen;
}

.itemTwo {
background: BlanchedAlmond;
}

header
advert
paragraph1
paragraph2
footer
**

<style>
.container {
  font-size: 1.5em;
  min-height: 300px;
  width: 100%;
  background: LightGray;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;
  grid-template-areas:
    "advert header"
    "advert content"
    "advert footer";
}
.item1 {
  background: LightSkyBlue;
  grid-area: header;
}

.item2 {
  background: LightSalmon;
  grid-area: advert;
}

.item3 {
  background: PaleTurquoise;
  grid-area: content;
  /* Only change code below this line */
  display: grid;
  grid-template-columns: auto 1fr;

  /* Only change code above this line */
}

.item4 {
  background: lightpink;
  grid-area: footer;
}

.itemOne {
  background: PaleGreen;
}

.itemTwo {
  background: BlanchedAlmond;
}

</style>

<div class="container">
<div class="item1">header</div>
<div class="item2">advert</div>
<div class="item3">
  <div class="itemOne">paragraph1</div>
  <div class="itemTwo">paragraph2</div>
</div>
<div class="item4">footer</div>
</div>

Your browser information:

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

Challenge: Create Grids within Grids

Link to the challenge:

It’s a typo.

In the video you watched, Beau actually types “colums” instead of “columns.” The browser ignores the entire declaration because of that spelling mistake. But it’s his mistake, not yours!

1 Like

The short and sweet answer is because you wrote the code correctly and the video is wrong.

The instructor in the video has a typo in “grid-template-columns” (he wrote “grid-template-colums”) so the code does execute. He effectively just changed the display to grid, which made the columns appear horizontally by default.

1 Like

I see @asemarian beat me to the answer :upside_down_face: lol

@JohnJohn I almost gave up on it because I couldn’t figure out what the problem was at first :sweat_smile:

@asemarian @JohnJohn Thank you both! :slight_smile: I couldn’t notice that.

1 Like