<div class="container">
<div class="grid__item"><img src="http://placehold.it/175x150?text=Image">Here is some text.</div>
<div class="grid__item"><img src="http://placehold.it/175x100?text=Image">Here is some text. Some items have more.</div>
<div class="grid__item"><img src="http://placehold.it/175x250?text=Image">Here is some text.</div>
<div class="grid__item"><img src="http://placehold.it/175x150?text=Image">Here is some text.</div>
<div class="grid__item"><img src="http://placehold.it/175x200?text=Image">Here is some text. Some items have more.</div>
<div class="grid__item"><img src="http://placehold.it/175x200?text=Image">Here is some text.</div>
<div class="grid__item"><img src="http://placehold.it/175x150?text=Image">Here is some text.</div>
<div class="grid__item"><img src="http://placehold.it/175x250?text=Image">Here is some text. Some items have more.</div>
<div class="grid__item"><img src="http://placehold.it/175x250?text=Image">Here is some text.</div>
<div class="grid__item"><img src="http://placehold.it/175x150?text=Image">Here is some text.</div>
<div class="grid__item"><img src="http://placehold.it/175x200?text=Image">Here is some text.</div>
<div class="grid__item"><img src="http://placehold.it/175x200?text=Image">Here is some text.</div>
<div class="grid__item"><img src="http://placehold.it/175x100?text=Image">Here is some text. Some items have more.</div>
<div class="grid__item"><img src="http://placehold.it/175x150?text=Image">Here is some text.</div>
</div>
* {
margin: 0;
padding: 0;
}
body {
background-color: #F5F5F5;
color: #555;
font-size: 1.1em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
margin: 40px auto;
max-width: 700px;
display: grid;
grid-template-columns: 175px 175px 175px 175px;
grid-gap: 1em 0.5em;
}
.grid__item:nth-child(2n+1),
.grid__item:nth-child(5n) {
align-self: start;
}
.grid__item:nth-child(3n+2),
.grid__item:nth-child(2n) {
align-self: center;
}
.grid__item:nth-child(5n+3),
.grid__item:nth-child(3n) {
align-self: end;
}