<div class="grid">
  <div class="item-1 red">1</div>
  <div class="item-2 green">2</div>
  <div class="item-3 purple">3</div>
  <div class="item-4 yellow">4</div>
  <div class="item-5 orange">5</div>
  <div class="item-6 blue">6</div>
  <div class="item-7 pink">7</div>
  <div class="item-8 grey">8</div>
</div>
/*Colors*/
.red{
  background: #fd7e7e;
}
.green{
  background: #bbfcae;
}
.purple{
  background: #c75ed7;
}
.yellow{
  background: #f7ff7d;
}
.orange{
  background: #fbaf71;
}
.blue{
  background: #9baeff;
}
.pink{
  background: #fbc8fd;
}
.grey{
  background: #dddddd;
}
/* GRID */
.grid {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 4em 4em 4em 4em;
}
.grid div{
  font-family: arial;
  font-size: 2em;
  color: rgba(0,0,0,.5);
}
/* FIRST item */
.item-1, .item-8{
  grid-column-start: 1;
  grid-column-end: 4;
}
Rerun