<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.