<div class="grid-container">
  <div class="grid-item a">a</div>
  <div class="grid-item b">b</div>
  <div class="grid-item c">c</div>
  <div class="grid-item d">d</div>
</div>

.grid-container {
  display: grid;
  grid-template-areas:  'a a a'
                        'b b c'
                        '. d d';
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  height: 250px;
  background-color: #ccc;
}

.a {
  grid-area: a;
  background-color: green;
}

.b {
  grid-area: b;
  background-color: yellow;
}

.c {
  grid-area: c;
  background-color: pink;
}

.d {
  grid-area: d;
  background-color: #555;
}