<div class="grid">
  <div class="subgrid">
    <div class="item"></div>
  </div>
</div>
:root {
--gridheight: 300px;
}
.grid {
  background-color: deepskyblue;
  height: var(--gridheight);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.subgrid {
  background-color: mediumblue;
  grid-column: 2 / 5;
  grid-row: 1 / 3;  
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, calc((var(--gridheight) * 2 / 3) / 2));
}
.item {
  background-color: black;
  grid-column: 2 / 3;
  grid-row: inherit; 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.