<main>
    <div class="h1 w3 gray"></div>
    <div class="h4 w1 s4 red"></div>
    <div class="h4 w1 s5 white"></div>
    <div class="h1 w2 z2 white"></div>
    <div class="h3 w1 z2 byellow"></div>
    <div class="h1 w1 z3 yellow"></div>
    <div class="h4 w1 s2 z3 gray"></div>
    <div class="h3 w1 z4 white"></div>
    <div class="h1 w3 z5 black"></div>
    <div class="h2 w3 s3 z6 white"></div>
    <div class="h1 w2 z7 pink"></div>
  </main>

index.html

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    background-color: white;
    height: 100vh;
  }
  main {
    display: grid;
    height: 100%;
    grid-template-columns: 16.8% 18.6% 53.7% 5.7% 5.2%;
    grid-template-rows: 4% 29% 19.5% 5.2% 7.3% 31% 4%;

    align-items: stretch;
  }
  div {
  background-color:springgreen;
  }

  /*width*/

  .w1 {
    grid-column-end: span 1;
  }
  .w2 {
    grid-column-end: span 2;
  }
  .w3 {
    grid-column-end: span 3;
  }
  .w4 {
    grid-column-end: span 4;
  }

  /*height*/

  .h1 {
    grid-row-end: span 1;
  }
  .h2 {
    grid-row-end: span 2;
  }
  .h3 {
    grid-row-end: span 3;
  }
  .h4 {
    grid-row-end: span 4;
  }
  .h5 {
    grid-row-end: span 5;
  }
  .h6 {
    grid-row-end: span 6;
  }

  /*spalte start*/

  .s2 {
    grid-column-start: 2;
  }
  .s3 {
    grid-column-start: 3;
  }
  .s4 {
    grid-column-start: 4;
  }


  /*zeile start*/

  .z2 {
    grid-row-start: 2;
  }
  .z3 {
    grid-row-start: 3;
  }
  .z4 {
    grid-row-start: 4;
  }
  .z5 {
    grid-row-start: 5;
  }
  .z6 {
    grid-row-start: 6;
  }
  .z7 {
    grid-row-start: 7;
  }

  /*farbe start*/

  .red {
      background: linear-gradient(180deg, #ff5a5a, #ed1818);
      background-size: 400% 400%;

      -webkit-animation: AnimationName 11s ease infinite;
      -moz-animation: AnimationName 11s ease infinite;
      -o-animation: AnimationName 11s ease infinite;
      animation: AnimationName 11s ease infinite;
  }

  @-webkit-keyframes AnimationName {
      0%{background-position:51% 0%}
      50%{background-position:50% 100%}
      100%{background-position:51% 0%}
  }
  @-moz-keyframes AnimationName {
      0%{background-position:51% 0%}
      50%{background-position:50% 100%}
      100%{background-position:51% 0%}
  }
  @-o-keyframes AnimationName {
      0%{background-position:51% 0%}
      50%{background-position:50% 100%}
      100%{background-position:51% 0%}
  }
  @keyframes AnimationName {
      0%{background-position:51% 0%}
      50%{background-position:50% 100%}
      100%{background-position:51% 0%}
  }

  .gray {
    background-color: #1e2928;
  }

  .white{
    background-color: #ededed;
  }

  .yellow{
        background: linear-gradient(180deg, #dfd947, #f4ec1d);
      background-size: 400% 400%;

      -webkit-animation: AnimationName 33s ease infinite;
      -moz-animation: AnimationName 33s ease infinite;
      -o-animation: AnimationName 33s ease infinite;
      animation: AnimationName 33s ease infinite;
  }

  @-webkit-keyframes AnimationName {
      0%{background-position:51% 0%}
      50%{background-position:50% 100%}
      100%{background-position:51% 0%}
  }
  @-moz-keyframes AnimationName {
      0%{background-position:51% 0%}
      50%{background-position:50% 100%}
      100%{background-position:51% 0%}
  }
  @-o-keyframes AnimationName {
      0%{background-position:51% 0%}
      50%{background-position:50% 100%}
      100%{background-position:51% 0%}
  }
  @keyframes AnimationName {
      0%{background-position:51% 0%}
      50%{background-position:50% 100%}
      100%{background-position:51% 0%}
  }

  .byellow {
      background: linear-gradient(315deg, #feff00, #7eff91);
      background-size: 400% 400%;

      -webkit-animation: AnimationName 15s ease infinite;
      -moz-animation: AnimationName 15s ease infinite;
      -o-animation: AnimationName 15s ease infinite;
      animation: AnimationName 15s ease infinite;
  }

  @-webkit-keyframes AnimationName {
      0%{background-position:1% 0%}
      50%{background-position:99% 100%}
      100%{background-position:1% 0%}
  }
  @-moz-keyframes AnimationName {
      0%{background-position:1% 0%}
      50%{background-position:99% 100%}
      100%{background-position:1% 0%}
  }
  @-o-keyframes AnimationName {
      0%{background-position:1% 0%}
      50%{background-position:99% 100%}
      100%{background-position:1% 0%}
  }
  @keyframes AnimationName {
      0%{background-position:1% 0%}
      50%{background-position:99% 100%}
      100%{background-position:1% 0%}
  }

  .black {
      background: linear-gradient(270deg, #0100ff, #bba1ff);
      background-size: 400% 400%;

      -webkit-animation: AnimationName 11s ease infinite;
      -moz-animation: AnimationName 11s ease infinite;
      -o-animation: AnimationName 11s ease infinite;
      animation: AnimationName 11s ease infinite;
  }

  @-webkit-keyframes AnimationName {
      0%{background-position:0% 51%}
      50%{background-position:100% 50%}
      100%{background-position:0% 51%}
  }
  @-moz-keyframes AnimationName {
      0%{background-position:0% 51%}
      50%{background-position:100% 50%}
      100%{background-position:0% 51%}
  }
  @-o-keyframes AnimationName {
      0%{background-position:0% 51%}
      50%{background-position:100% 50%}
      100%{background-position:0% 51%}
  }
  @keyframes AnimationName {
      0%{background-position:0% 51%}
      50%{background-position:100% 50%}
      100%{background-position:0% 51%}
  }

  .pink {
      background: linear-gradient(270deg, #ff00ef, #7effed);
      background-size: 400% 400%;

      -webkit-animation: AnimationName 25s ease infinite;
      -moz-animation: AnimationName 25s ease infinite;
      -o-animation: AnimationName 25s ease infinite;
      animation: AnimationName 25s ease infinite;
  }

  @-webkit-keyframes AnimationName {
      0%{background-position:0% 51%}
      50%{background-position:100% 50%}
      100%{background-position:0% 51%}
  }
  @-moz-keyframes AnimationName {
      0%{background-position:0% 51%}
      50%{background-position:100% 50%}
      100%{background-position:0% 51%}
  }
  @-o-keyframes AnimationName {
      0%{background-position:0% 51%}
      50%{background-position:100% 50%}
      100%{background-position:0% 51%}
  }
  @keyframes AnimationName {
      0%{background-position:0% 51%}
      50%{background-position:100% 50%}
      100%{background-position:0% 51%}
  }

index.css