Mosaic with CSS grid

index.css

body {
  margin: 0;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50vw);
  grid-template-rows: repeat(auto-fill, 50vw);
}

.box {
  box-sizing: border-box;
  height: 50vw;
}

@media all and (min-width: 30rem) {
  .wrapper {
    grid-template-columns: repeat(auto-fill, 33.33vw );
    grid-template-rows: repeat(auto-fill, 33.33vw );
  }  
  .box {
    height: 33.33vw;
  }
}

@media all and (min-width: 60rem) {
  .wrapper {
    grid-template-columns: repeat(auto-fill, 25vw);
    grid-template-rows: repeat(auto-fill, 25vw);
  }  
  .box {
    height: 25vw;
  }
}

index.html

<div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
  <div class="box">J</div>
  <div class="box">K</div>
  <div class="box">L</div>
</div>