Grid within a grid i need help on the grid column template

Tell us what’s happening:

  **Your code so far**

<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 */
 grid-template-column: auto, 1fr;
 display: grid;

  /* 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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36.

Challenge: Create Grids within Grids

Link to the challenge:

The challenge is self explanatory. Read the prompts at the very bottom very closely, they tell you what to do.

If you’re struggling, revise the class challenge and look in to types of display property available for an entity.

It’s asking you to define a display type for a certain class and then apply values to that type.

I cant be any more specific than this because we’re not allowed to give answers to challenges.

1 Like

thank you ive figured it out i was in the rush earlier didnt have full concetration

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.