<div class="grid">grid
<div class="subgrid">subgrid
<div class="subitem">subitem</div>
</div>
</div>
body {
font-size: 30px;
text-align: center;
font-family: 'Google Sans', sans-serif;
}
.grid {
padding: 10px;
width: min-content;
display: grid;
grid-template-columns: repeat(8, 50px);
grid-template-rows: repeat(3, minmax(30px, auto));
border: 4px solid royalblue;
}
.subgrid {
padding: 10px;
border: 4px solid gold;
display: grid;
grid-column: 2 / 8;
grid-row: 2 / 4;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}
.subitem {
padding: 10px;
border: 4px solid rebeccapurple;
grid-column: 4 / 7;
grid-row: 1 / 3;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.