<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.