<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>

<div class="container2">
  <div class="item12">1</div>
  <div class="item22">2</div>
  <div class="item32">3</div>
  <div class="item42">4</div>
  <div class="item52">5</div>
</div>

<div class="container3">
  <div class="item13">1</div>
  <div class="item23">2</div>
  <div class="item33">3</div>
  <div class="item43">4</div>
  <div class="item53">5</div>
</div>

<div class="container4">
  <div class="item14">1</div>
  <div class="item24">2</div>
  <div class="item34">3</div>
  <div class="item44">4</div>
  <div class="item54">5</div>
</div>

<div class="container5">
  <div class="item15">1</div>
  <div class="item25">2</div>
  <div class="item35">3</div>
  <div class="item45">4</div>
  <div class="item55">5</div>
</div>


<div class="container6">
  <div class="item16">1</div>
  <div class="item26">2</div>
  <div class="item36">3</div>
  <div class="item46">4</div>
  <div class="item56">5</div>
</div>

<div class="container7">
  <div class="item17">1</div>
  <div class="item27">2</div>
  <div class="item37">3</div>
  <div class="item47">4</div>
  <div class="item57">5</div>
</div>

<div class="container8">
  <div class="item18">1</div>
  <div class="item28">2</div>
  <div class="item38">3</div>
  <div class="item48">4</div>
  <div class="item58">5</div>
</div>

<div class="container9">
  <div class="item19">1</div>
  <div class="item29">2</div>
  <div class="item39">3</div>
  <div class="item49">4</div>
  <div class="item59">5</div>
</div>

<div class="container11">
  <div class="item111">1</div>
  <div class="item211">2</div>
  <div class="item311">3</div>
  <div class="item411">4</div>
  <div class="item511">5</div>
</div>
<div class="container211">
  <div class="item111">1</div>
  <div class="item211">2</div>
  <div class="item311">3</div>
  <div class="item411">4</div>
  <div class="item511">5</div>
</div>


<div class="container12">
  <div class="item112">header</div>
  <div class="item212">advert</div>
  <div class="item312">content</div>
  <div class="item412">footer</div>
</div>

<div class="container13">
  <div class="item113">header</div>
  <div class="item213">advert</div>
  <div class="item313">
    <div class="itemOne13">paragraph1</div>
    <div class="itemTwo13">paragraph2</div>
  </div>
  <div class="item413">footer</div>
</div>

  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}

  .container {
    font-size: 40px;
    width: 100%;
    background: LightGray;
    /* Only change code below this line */
    display: grid;
/*     grid-template-columns: 100px 100px 100px; */
    grid-template-rows: 50px 50px;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
        /* grid-template-columns: auto 50px 10% 2fr 1fr; */

     grid-template-columns: 1fr 100px 2fr;
    grid-gap: 10px 20px;
    /* Only change code above this line */
  }

 .item12{background:LightSkyBlue;}
  .item22{background:LightSalmon;}
  .item32{background:PaleTurquoise;}
  .item42{background:LightPink;}

  .item52 {
    background: PaleGreen;
    /* Only change code below this line */
  grid-column: 2 / 4 ;
    grid-row: 2 / 4

    /* Only change code above this line */
  }

  .container2 {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }

.item13{background: LightSkyBlue;}

  .item23 {
    background: LightSalmon;
    /* Only change code below this line */
      justify-self: center;
    
    /* Only change code above this line */
  }

  .item33{background:PaleTurquoise;
 align-self: end;
}
  .item43{background:LightPink;}
  .item53{background:PaleGreen;}

  .container3 {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }

  .item14{background:LightSkyBlue;}
  .item24{background:LightSalmon;}
  .item34{background:PaleTurquoise;}
  .item44{background:LightPink;}
  .item54{background:PaleGreen;}

  .container4 {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    /* Only change code below this line */
    justify-items: center;
    
    /* Only change code above this line */
  }

  .item15{background:LightSkyBlue;}
  .item25{background:LightSalmon;}
  .item35{background:PaleTurquoise;}
  .item45{background:LightPink;}
  .item55{background:PaleGreen;}

  .container5 {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    /* Only change code below this line */
    align-items: end;
    
    /* Only change code above this line */
  }

  .item16{background:LightSkyBlue;}
  .item26{background:LightSalmon;}
  .item36{background:PaleTurquoise;}
  .item46{background:LightPink;}

  .item56 {
    background: PaleGreen;
    /* Only change code below this line */
  grid-area: footer;
    
    /* Only change code above this line */
  }

  .container6 {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    grid-template-areas:
      "header header header"
      "advert content content"
      "footer footer footer";
  }

  .item17{background:LightSkyBlue;}
  .item27{background:LightSalmon;}
  .item37{background:PaleTurquoise;}
  .item47{background:LightPink;}

  .item57 {
    background: PaleGreen;
    /* Only change code below this line */
   /* grid-area: 1/1/2/4; */
     grid-area: 3/1/4/4;

    /* Only change code above this line */
  }

  .container7 {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }

  .item18{background:LightSkyBlue;}
  .item28{background:LightSalmon;}
  .item38{background:PaleTurquoise;}
  .item48{background:LightPink;}
  .item58{background:PaleGreen;}

  .container8 {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* Only change code below this line */

    /* grid-template-columns: 1fr 1fr 1fr; */

    grid-template-columns: repeat(3, 1fr);

    /* Only change code above this line */
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }


  .item19{background:LightSkyBlue;}
  .item29{background:LightSalmon;}
  .item39{background:PaleTurquoise;}
  .item49{background:LightPink;}
  .item59{background:PaleGreen;}

  .container9 {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* Only change code below this line */

    /* grid-template-columns: repeat(3, 1fr); */

    /* grid-template-columns: 100px minmax(50px, 200px); */

 grid-template-columns: repeat(3, minmax(90px, 1fr));
    
/*        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); */
    /* Only change code above this line */
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }

.item111{background:LightSkyBlue;}
  .item211{background:LightSalmon;}
  .item311{background:PaleTurquoise;}
  .item411{background:LightPink;}
  .item511{background:PaleGreen;}

  .container11 {
    font-size: 40px;
    min-height: 100px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }

  .container211 {
    font-size: 40px;
    min-height: 100px;
    width: 100%;
    background: Silver;
    display: grid;
    /* Only change code below this line */

    /* grid-template-columns: repeat(3, minmax(60px, 1fr)); */

     grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));

    /* Only change code above this line */
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }

  .item112 {
    background: LightSkyBlue;
    grid-area: header;
  }

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

  .item312 {
    background: PaleTurquoise;
    grid-area: content;
  }

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

  .container12 {
    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){
    .container12{
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "advert header"
        "advert content"
        "advert footer";
    }
  }

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

  .container13 {
    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";
  }
  .item113 {
    background: LightSkyBlue;
    grid-area: header;
  }

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

  .item313 {
    background: PaleTurquoise;
    grid-area: content;
    /* Only change code below this line */

      display: grid;
      grid-template-columns: auto 1fr;
    /* Only change code above this line */
  }

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

  .itemOne13 {
    background: PaleGreen;
  }

  .itemTwo13 {
    background: BlanchedAlmond;
  }