<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;
}
This Pen doesn't use any external JavaScript resources.