<div class="parent">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
  <div class="div5"></div>
  <div class="div6"></div>
</div>

.parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
.parent div {
  height: 100px;
}
.div1 {
    grid-area: 1 / 1 / 2 / 3;
    background-color: #5bcbdf;
}
.div2 {
    grid-area: 1 / 3 / 2 / 5;
    background-color: #fd787b;
}
.div3 {
    grid-area: 2 / 1 / 3 / 2;
    background-color: #5edba0;
}
.div4 {
    grid-area: 2 / 2 / 3 / 3;
    background-color: #a5d661;
}
.div5 {
    grid-area: 2 / 3 / 3 / 4;
    background-color: #f7da7c;
}
.div6 {
    grid-area: 2 / 4 / 3 / 5;
    background-color: #f7b07c;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.