<div class="grid">
  <div class="item">
    <div class="subitem"></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: 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: repeat(3, 1fr);
  grid-template-rows: subgrid;
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.