Nested grid within grid

Tell us what’s happening:
i am not understanding where i am wrong…

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;
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 (X11; Ubuntu; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0.

Challenge: Create Grids within Grids

Link to the challenge:

Hey @Komal-1,

You need to remove the ’ , ’ between auto and 1fr to set the value;


Good Luck :blush:

1 Like

Thanx :blush: it works…

1 Like

thank you for your best wishes.

1 Like