<div class="wrapper">
  <div class="container left">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="container center">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="container right">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-template-rows: 500px;
  .container {
    display: grid;
    height: 500px;
    grid-template-columns: 50% 50%;
    grid-template-rows: 100px 100px;
    border: 1px solid #ebebeb;
    .item {
      background: orange;
      margin: 5px;
      width: 50%;
    }
    &.left {
      justify-items: start;
    }
    &.center {
      justify-items: center;
    }
    &.right {
      justify-items: end;
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.