<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
  

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-rows: 100px 100px;
  place-items: center center;
  .item {
    background: orange;
    margin: 5px;
    width: 50%;
    height: 50%;
    &:nth-child(1) {
      align-self: start;
    }
    &:nth-child(2) {
      align-self: center;
    }
    &:nth-child(3) {
      align-self: end;
    }
    &:nth-child(4) {
      align-self: stretch;
      height: auto;
    }
  }
}