<div class="grid-box">
  <div class="grid-element a">1</div>
  <div class="grid-element b">2</div>
  <div class="grid-element c">3</div>
  <div class="grid-element d">4</div>
</div>

.grid-box {
    width: min-content;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 100px 100px 100px;
    border: 4px solid royalblue;
  }
  .grid-element {
    padding: 10px;
    border: 4px solid gold;
    font-size: 32px;
    text-align: center;
    font-family: 'Google Sans', sans-serif;
  }
  .a {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .b {
    grid-column: 3 ;
    grid-row: 1 / 3;
  }
  .c {
    grid-column: 1 ;
    grid-row: 2 ;
  }
  .d {
    grid-column: 2;
    grid-row: 2;
  }