<div class="wrapper">
  <div class="container top">
    <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 bottom">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="container stretch">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 500px;
  .container {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 100px;
    .item {
      background: orange;
      margin: 5px;
      min-height: 20%;
    }
    &.top {
      align-items: start;
    }
    &.center {
      align-items: center;
    }
    &.bottom {
      align-items: end;
    }
    &.stretch {
      align-items: stretch;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.