Pure CSS masonry layout

by Dmitriy Shvanyk

HTML

<div class="container">
  <img src="http://via.placeholder.com/150x150">
  <img src="http://via.placeholder.com/150x250">
  <img src="http://via.placeholder.com/150x200">
  <img src="http://via.placeholder.com/150x150">
  <img src="http://via.placeholder.com/150x200">
  <img src="http://via.placeholder.com/150x100">
  <img src="http://via.placeholder.com/150x200">
  <img src="http://via.placeholder.com/150x150">
  <img src="http://via.placeholder.com/150x150">
  <img src="http://via.placeholder.com/150x250">
  <img src="http://via.placeholder.com/150x200">
</div>

CSS

.container {
  padding: 10px;
  max-width: 900px;
  margin: 0 auto;
  column-count: 3;
  column-gap: 10px;
}

.container img {
  width: 100%;
  display: block;
  margin-bottom: 10px;
}