CSS Grid

    <style>
      .d1{background:LightSkyBlue;}
      .d2{background:LightSalmon;}
      .d3{background:PaleTurquoise;}
      .d4{background:LightPink;}
      .d5{background:PaleGreen;}
      
      .container {
        font-size: 40px;
        width: 100%;
        background: LightGray;
        /* add your code below this line */
        display: grid;
        
    <style>
      .d1{background:LightSkyBlue;}
      .d2{background:LightSalmon;}
      .d3{background:PaleTurquoise;}
      .d4{background:LightPink;}
      .d5{background:PaleGreen;}
      
      .container {
        font-size: 40px;
        width: 100%;
        background: LightGray;
        display: grid;
        /* add your code below this line */
        
    <style>
      .d1{background:LightSkyBlue;}
      .d2{background:LightSalmon;}
      .d3{background:PaleTurquoise;}
      .d4{background:LightPink;}
      .d5{background:PaleGreen;}
      
      .container {
        font-size: 40px;
        width: 100%;
        background: LightGray;
        display: grid;
        grid-template-columns: 100px 100px 100px;
        /* add your code below this line */
    <style>
      .d1{background:LightSkyBlue;}
      .d2{background:LightSalmon;}
      .d3{background:PaleTurquoise;}
      .d4{background:LightPink;}
      .d5{background:PaleGreen;}
      
      .container {
        font-size: 40px;
        width: 100%;
        background: LightGray;
        display: grid;
        /* modify the code below this line */
        
    <style>
      .d1{background:LightSkyBlue;}
      .d2{background:LightSalmon;}
      .d3{background:PaleTurquoise;}
      .d4{background:LightPink;}
      .d5{background:PaleGreen;}
      
      .container {
        font-size: 40px;
        min-height: 300px;
        width: 100%;
        background: LightGray;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    <style>
      .d1{background:LightSkyBlue;}
      .d2{background:LightSalmon;}
      .d3{background:PaleTurquoise;}
      .d4{background:LightPink;}
      .d5{background:PaleGreen;}
      
      .container {
        font-size: 40px;
        min-height: 300px;
        width: 100%;
        background: LightGray;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    <style>
      .d1{background:LightSkyBlue;}
      .d2{background:LightSalmon;}
      .d3{background:PaleTurquoise;}
      .d4{background:LightPink;}
      .d5{background:PaleGreen;}
      
      .container {
        font-size: 40px;
        min-height: 300px;
        width: 100%;
        background: LightGray;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    <style>
      .item1{background:LightSkyBlue;}
      .item2{background:LightSalmon;}
      .item3{background:PaleTurquoise;}
      .item4{background:LightPink;}
      
      .item5 {
        background: PaleGreen;
        /* add your code below this line */
        grid-column: 1 / 3;
        
        /* add your code above this line */
      }
      
    <style>
      .item1{background:LightSkyBlue;}
      .item2{background:LightSalmon;}
      .item3{background:PaleTurquoise;}
      .item4{background:LightPink;}
      
      .item5 {
        background: PaleGreen;
        grid-column: 2 / 4;
        /* add your code below this line */
        
        
        /* add your code above this line */
      }
    <style>
      .item1{background: LightSkyBlue;}
      
      .item2 {
        background: LightSalmon;
        /* add your code below this line */
        justify-self: center;
        
        /* add your code above this line */
      }
      
      .item3{background:PaleTurquoise;}
      .item4{background:LightPink;}
      .item5{background:PaleGreen;}
    <style>
      .item1{background:LightSkyBlue;}
      .item2{background:LightSalmon;}
      
      .item3 {
        background: PaleTurquoise;
        /* add your code below this line */
        
        
        /* add your code above this line */
      }
      
      .item4{background:LightPink;}
      .item5{background:PaleGreen;}
    <style>
      .item1{background:LightSkyBlue;}
      .item2{background:LightSalmon;}
      .item3{background:PaleTurquoise;}
      .item4{background:LightPink;}
      .item5{background:PaleGreen;}
      
      .container {
        font-size: 40px;
        min-height: 300px;
        width: 100%;
        background: LightGray;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    <style>
      .item1{background:LightSkyBlue;}
      .item2{background:LightSalmon;}
      .item3{background:PaleTurquoise;}
      .item4{background:LightPink;}
      .item5{background:PaleGreen;}
      
      .container {
        font-size: 40px;
        min-height: 300px;
        width: 100%;
        background: LightGray;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    <style>
      .item1{background:LightSkyBlue;}
      .item2{background:LightSalmon;}
      .item3{background:PaleTurquoise;}
      .item4{background:LightPink;}
      .item5{background:PaleGreen;}
      
      .container {
        font-size: 40px;
        min-height: 300px;
        width: 100%;
        background: LightGray;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    <style>
      .item1{background:LightSkyBlue;}
      .item2{background:LightSalmon;}
      .item3{background:PaleTurquoise;}
      .item4{background:LightPink;}
      
      .item5 {
        background: PaleGreen;
        /* add your code below this line */
        grid-area: footer;
        
        /* add your code above this line */
      }
      
    <style>
      .item1{background:LightSkyBlue;}
      .item2{background:LightSalmon;}
      .item3{background:PaleTurquoise;}
      .item4{background:LightPink;}
      
      .item5 {
        background: PaleGreen;
        /* add your code below this line */
        grid-area: 3/4/1/4;
        
        /* add your code above this line */
      }
      
    <style>
      .item1{background:LightSkyBlue;}
      .item2{background:LightSalmon;}
      .item3{background:PaleTurquoise;}
      .item4{background:LightPink;}
      .item5{background:PaleGreen;}
      
      .container {
        font-size: 40px;
        min-height: 300px;
        width: 100%;
        background: LightGray;
        display: grid;
        /* change the code below this line */
    <style>
      .item1{background:LightSkyBlue;}
      .item2{background:LightSalmon;}
      .item3{background:PaleTurquoise;}
      .item4{background:LightPink;}
      .item5{background:PaleGreen;}
      
      .container {
        font-size: 40px;
        min-height: 300px;
        width: 100%;
        background: LightGray;
        display: grid;
        /* change the code below this line */
    <style>
      .item1{background:LightSkyBlue;}
      .item2{background:LightSalmon;}
      .item3{background:PaleTurquoise;}
      .item4{background:LightPink;}
      .item5{background:PaleGreen;}
      
      .container {
        font-size: 40px;
        min-height: 100px;
        width: 100%;
        background: LightGray;
        display: grid;
        /* change the code below this line */
    <style>
      .item1{background:LightSkyBlue;}
      .item2{background:LightSalmon;}
      .item3{background:PaleTurquoise;}
      .item4{background:LightPink;}
      .item5{background:PaleGreen;}
      
      .container {
        font-size: 40px;
        min-height: 100px;
        width: 100%;
        background: LightGray;
        display: grid;
        grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));
    <style>
      .item1 {
        background: LightSkyBlue;
        grid-area: header;
      }
      
      .item2 {
        background: LightSalmon;
        grid-area: advert;
      }
      
      .item3 {
        background: PaleTurquoise;
        grid-area: content;
    <style>
      .item1 {
        background: LightSkyBlue;
        grid-area: header;
      }
      
      .item2 {
        background: LightSalmon;
        grid-area: advert;
      }
      
      .item3 {
        background: PaleTurquoise;
        grid-area: content;