<div class="grid">

  <div class="item"></div>
  <div class="bg1"></div>
  <div class="bg2"></div>
  <div class="item"></div>
  <div class="item"></div>
   <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
   <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
<div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
   <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
   <div class="item"></div>
  <div class="item"></div>
  
</div>

body {
  margin: 0;
  background: beige;
}

.grid {
  margin: 5%;
  display: grid;
  grid-template-columns: repeat(6, 100px);
  grid-template-rows: repeat(6, 100px);
  grid-gap: 15px;
  position: relative;
  background-color: gray;
  z-index: -2;
  justify-content: center;
}

.item {
  background-color: blue;
}

.bg1 {
  background: red;
  position: absolute;
  width: 100%;
  height: 100%;
  grid-row: 1 / 4;
  grid-column: 1 / 4;
  z-index: -1;
}

.bg2 {
  background: yellow;
  position: absolute;
  width: 100%;
  height: 100%;
  grid-row: 2 / 4;
  grid-column: 5 / -1;
  z-index: -1;
}