<div class="container">
    <div class="item a"></div>
    <div class="item b"></div>
    <div class="item c"></div>
    <div class="item d"></div>
    <div class="item e"></div>
    <div class="item f"></div>
  </div>
.container {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  grid-template-rows: 2fr 1fr 2fr;
  grid-template-areas: 
    "a a b"
    "c d b"
    "e f f";
  gap: 10px;
  width: 500px;
  height: 500px;
}

.a {
  grid-area: a;
  background-color: royalblue;
}
.b {
  grid-area: b;
  background-color: gold;
}
.c {
  grid-area: c;
  background-color: slateblue;
}
.d {
  grid-area: d;
  background-color: orange;
}
.e {
  grid-area: e;
  background-color: salmon;
}
.f {
  grid-area: f;
  background-color: seagreen;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.