<div class="main-grid">
  <div class="item grid-item"></div>
  <div class="child-grid">
    <div class="item child-grid-item"></div>
  </div>
</div>
.main-grid {
  display: grid;
  grid-template-columns: [a] 1fr [b] 1fr [c] 1fr [d] 1fr [e] 1fr [f] 1fr [g] 1fr [h] 1fr [i] 1fr [j] 1fr [k] 1fr [l] 1fr [m];
  grid-template-rows: repeat(4, minmax(150px, auto));
}

.child-grid {
  border: 5px solid #625c60;
  grid-column: 4 / 8;
  grid-row: 2 / 4;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.item {
  grid-column: e;
}

.item {
  background-color: #6667ab;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.