JSFiddle - React, Tailwind, and code Playground

HTML

<div class="square-container">
  <div class="square">
    <div class="content"></div>
  </div>
  <div class="square">
    <div class="content spread"></div>
  </div>
  <div class="square">
    <div class="content column"></div>
  </div>
</div>

CSS

.square-container{
    display: grid;
    grid-template-columns: repeat(3, 30vw);
    grid-template-rows: 30vw;
    grid-gap: 2.5vw;
    padding: 2.5vw;
    background-color: gray;
}

.square {
  background-color: lightgreen;
}

body { margin: 0; }