<div class="container">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>
  <div class="e"></div>
</div>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  grid-auto-flow: row;
  grid-template-areas:
    "a a a b b b"
    "c c d d e e";
  width: 100%;
  height: 60vh;
}

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

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

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

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

.e {
  grid-area: e;
  background-color: orange;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.