Edit in JSFiddle

<div class="container">
  <div class="item foo"></div>
  <div class="item bar"></div>
  <div class="item baz"></div>
  <div class="item qux"></div>
</div>
.container {
  height: 500px;
  display: grid;
  grid-gap: 10px;
}

.foo {
  grid-row: span 2;
  background-color: rgba(0, 94, 174, 1);
}

.bar {
  grid-column: 2 / span 2;
  background-color: rgba(0, 40, 103, 1);
}

.baz {
  grid-column: 2 / span 2;
  grid-row: 2;
  background-color: rgba(201, 202, 203, 1);
}

.qux {
  grid-column: 4;
  grid-row: span 2;
  background-color: rgba(181, 161, 140, 1);
}