<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;
  gap: 20px;
  grid-template-columns: repeat(9, 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;
  grid-template-rows: subgrid;
  row-gap: 0;
}

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

.subitem2 {
  background-color: rgba(0,0,0,.5);
  grid-column: 2;
  grid-row: 1;
}