<div class="con">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9">9</div>
</div>

.con {
  display: grid;
  grid-template-columns: repeat(3, 100px) ;
  grid-template-rows: repeat(5, 100px);
  
  grid-template-areas: 
    'a b c'
    'd e f'
    'h i g';
}

.item {
  font-size: 2em;
}

.item-1 {
  background-color: #ef342a;
  grid-area: f;
}

.item-2 {
  background-color: #f68f26;
  grid-area: 1/1/3/3;
}

.item-3 {
  background-color: #4ba946;
}

.item-4 {
  background-color: #0376c2;
}

.item-5 {
  background-color: #c077af;
}

.item-6 {
  background-color: #f8d29d;
}

.item-7 {
  background-color: #b5a87f;
}

.item-8 {
  background-color: #d0e4a9;
}

.item-9 {
  background-color: #4dc7ec;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.