<div class="grid">
  <div class="item">
    <div class="subitem"></div>
    <div class="subitem2"></div>
  </div>
</div>

body {
  padding: 2em;
  background-color: rgb(192,181,129);
  color: #fff;
}

.grid {
  border: 5px solid #fff;
  width: 800px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr [col-start] 1fr 1fr 1fr [col-end] 1fr 1fr 1fr;
  grid-template-rows: repeat(4, minmax(100px, auto));
}

.item {
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  background-color: rgba(255,255,255,.6);
  display: grid;
  grid-template-columns: subgrid [sub-a] [sub-b] [sub-c] [sub-d] [sub-e] [sub-f];
  grid-template-rows: subgrid;
}

.subitem {
  background-color: rgb(209,54,114);
  grid-column: col-start / col-end;
  grid-row: 1 / 3;
}

.subitem2 {
  background-color: rgba(0,0,0,.5);
  grid-column: sub-b / sub-d;
  grid-row: 1;
}