<div class="grid-container">
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div> 
  <div class="item-4"></div>
  <div class="item-5"></div>
</div>



.grid-container {
  display: grid;
  background: #ccc;
  grid-template-columns: 150px 150px 150px; /* three columns  */
  grid-template-rows: 150px 150px; /* two rows  */
  grid-template-areas: "a b c"
                       "d e c";
  grid-gap: 1em 1em;
  justify-content: start;
}

.item-1 {
  grid-area: a;
  background: lightgreen;
}

.item-2 {
  grid-area: b;
  background: lemonchiffon;
}

.item-3 {
  grid-area: c;
  background: lightgreen;
}

.item-4 {
  grid-area: d;
  background: mistyrose;
}

.item-5 {
  grid-area: e;
  background: lavender;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.