acilsd/gist:d7693234f4ca604d97d0ee74e6f1990d

## gistfile1.txt
<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Simple Masonry Layout With Flexbox</title>
        <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div id="masonry">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/6.jpg">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/8.jpg">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/9.jpg">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/7.jpg">
</div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  </body>
</html>

body {
  margin: 0; background: #131212;
}
div#masonry {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  height: 100vw;
  max-height: 800px;
  font-size: 0;
}
div#masonry img {
  width: 33.3%;
  -webkit-transition: .8s opacity;
  transition: .8s opacity;
}

div#masonry:hover img { opacity: 0.3; }
div#masonry:hover img:hover { opacity: 1; }

/* fallback for earlier versions of Firefox */

@supports not ((-webkit-flex-wrap: wrap) or (-ms-flex-wrap: wrap) or (flex-wrap: wrap)) {
  div#masonry { display: block; }
  div#masonry img {
  display: inline-block;
  vertical-align: top;
  }
}
	<!DOCTYPE html>
	<html >
	<head>
	<meta charset="UTF-8">
	<title>Simple Masonry Layout With Flexbox</title>
	<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
	<div id="masonry">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/6.jpg">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/8.jpg">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/9.jpg">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/7.jpg">
	</div>
	<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
	</body>
	</html>

	body {
	margin: 0; background: #131212;
	}
	div#masonry {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	height: 100vw;
	max-height: 800px;
	font-size: 0;
	}
	div#masonry img {
	width: 33.3%;
	-webkit-transition: .8s opacity;
	transition: .8s opacity;
	}

	div#masonry:hover img { opacity: 0.3; }
	div#masonry:hover img:hover { opacity: 1; }

	/* fallback for earlier versions of Firefox */

	@supports not ((-webkit-flex-wrap: wrap) or (-ms-flex-wrap: wrap) or (flex-wrap: wrap)) {
	div#masonry { display: block; }
	div#masonry img {
	display: inline-block;
	vertical-align: top;
	}
	}