<ul class="wrapper">
  <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/gallery1.jpg" alt="Balloon"></li>
  <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/gallery2.jpg" alt="Balloons"></li>
  <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/gallery3.jpg" alt="Balloons"></li>
  <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/gallery6.jpg" alt="Balloon"></li>
</ul>  

img {
  max-width: 100%;
  border-radius: 10px;
}

.wrapper {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.wrapper li {
  box-sizing: border-box;
  padding: 1em;
  min-width: 1%;
}

.wrapper li:nth-child(2) {
  align-self: center;
}

.wrapper li:nth-child(3) {
  align-self: start;
}

.wrapper li:nth-child(4) {
  align-self: end;
}