<main>
    <div class="w4 blue"></div>
    <div class="w1 azure"></div>
    <div class="w3 blue"></div>
    <div class="w2 azure"></div>
    <div class="w2 blue"></div>
    <div class="w3 azure"></div>
    <div class="w1 blue"></div>
    <div class="w4 azure"></div>
    <div class="w4 red"></div>
    <div class="w1 yellow"></div>
    <div class="w3 red"></div>
    <div class="w2 yellow"></div>
    <div class="w2 red"></div>
    <div class="w3 yellow"></div>
    <div class="w1 red"></div>
    <div class="w4 yellow"></div>
</main>

index.html

* {
    margin: 0;
  }

  body {
    background-color: yellow;
  }

  main {
    display: flex;
    flex-wrap: wrap;
  }

  div {
    height: 50vh;
  }
  .w1 {
    width: 5%;
  }
  .w2 {
    width: 10%;
  }
  .w3 {
    width: 15%;
  }
  .w4 {
    width: 20%;
  }

  .blue {
    background-color: #00008b;
  }
  .azure {
    background-color: #5f9ea0;
  }
  .red {
    background-color: #b22222;
  }
  .yellow {
    background-color: #ffd700;
  }

index.css