<div class="grid">
  <div class="grid__item"><img src="http://placeimg.com/350/480/any"</a></div>
  <div class="grid__item"><img src="http://placeimg.com/640/480/any"</a></div>
  <div class="grid__item"><img src="http://placeimg.com/300/600/any"</a></div>
  <div class="grid__item"><img src="http://placeimg.com/640/480/any"</a></div>
  <div class="grid__item"><img src="http://placeimg.com/500/250/any"</a></div>
  <div class="grid__item"><img src="http://placeimg.com/320/240/any"</a></div>
  <div class="grid__item"><img src="http://placeimg.com/480/640/any"</a></div>
  <div class="grid__item"><img src="http://placeimg.com/650/480/any"</a></div>
  <div class="grid__item"><img src="http://placeimg.com/300/500/any"</a></div>
  <div class="grid__item"><img src="http://placeimg.com/520/250/any"</a></div>
  <div class="grid__item"><img src="http://placeimg.com/640/480/any"</a></div>
  <div class="grid__item"><img src="http://placeimg.com/850/400/any"</a></div>
  <div class="grid__item"><img src="http://placeimg.com/350/350/any"</a></div>
</div>

.grid {
  column-count: 4;
  column-gap: .5em;
  max-width: 980px;
  margin: auto;
  width: 100%;
}

img {
  height: auto;
  max-width: 100%;
}

@media(max-width: 800px) {
    .grid {
      column-count: 3;
  }
}

@media(max-width: 600px) {
    .grid {
      column-count: 2;
  }
}

@media(max-width: 400px) {
    .grid {
      column-count: 1;
  }
}