HTML
<div class="masonry">
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg"></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg"></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg"></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg"></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/6.jpg"></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/8.jpg"></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/9.jpg"></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/7.jpg"></div>
</div>
CSS
body {
margin: 0 auto; background: #131212;
max-width:1200px;
}
.masonry {
display: -ms-flexbox;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vh;
font-size: 0;
overflow: hidden;
}
.masonry div{
width: 33.3%;
transition: all 0.5s;
}
.masonry div img{
max-width:100%;
}
/* fallback for earlier versions of Firefox */
@supports not (flex-wrap: wrap) {
div#masonry { display: block; }
div#masonry img {
display: inline-block;
vertical-align: top;
}
}
@media screen and (max-width: 960px) {
.masonry { height: 200vh; min-height: auto;}
.masonry div{ width:50%; height: auto;}
.masonry div img { width:100%; }
}
@media screen and (max-width: 871px) {
.masonry { height: auto;}
.masonry div{ height: auto; width:100%;}
.masonry div img { width: 100%; }
}
1 Response