<div class="layout">
<div class="child">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="child">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
.layout {
display: flex;
justify-content: space-around;
}
.child {
width: 200px;
height: 200px;
background: orange;
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(9, 1fr);
}
.child span {
background: darkred;
}
.child span:nth-child(1) {
grid-row: 2 / 3;
grid-column: 5 / 6;
}
.child span:nth-child(2) {
grid-row: 5 / 7;
grid-column: 1 / 3;
}
.child span:nth-child(3) {
grid-row: 6 / 7;
grid-column: 6 / 7;
}
.child span:nth-child(4) {
grid-row: 8 / 9;
grid-column: 2 /6;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.