<div class="container">
  <div class="tomato"></div>
  <div class="gold"></div>
</div>
* { margin: 0; padding: 0; }

.container {
  display: grid;
  grid-template-columns: repeat( 8, 12.5vw );
  grid-template-rows: repeat( 8, 12.5vh );
  width: 100vw;
  height: 100vh;
  background-color: #00A2FF;
}

.tomato {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  background-color: tomato;
}

.gold {
  grid-column: 4 / 8;
  grid-row: 3 / 8;
  background-color: gold;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.