Edit in JSFiddle

<div class="container">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
  <div class="child manual">Child 4</div>
  
  <div class="subContainer manual2">
    <div class="subChild">Child 11</div>  
    <div class="subChild">Child 12</div>  
    <div class="subChild">Child 13</div>  
    <div class="subChild">Child 14</div> 
    <div class="subChild">Child 15</div>  
  </div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px 10px;
  background-color: lightblue;
}

.child {
  background-color: blue;
  text-align: center;
}

.manual {
  grid-row: 2 / span 1;
  grid-column: 1 / span 2;  
}

.manual2 {
  grid-row: 2 / span 2;
  grid-column: 3 / span 1;
}

.subContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 5em auto;
  grid-gap: 2px 2px;
}

.subChild {
  background-color: lightyellow;
  text-align: center;
}