HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="masonry">
<div class="item">
<img src="images/img-1.jpg" alt="">
</div>
<div class="item">
<img src="images/img-2.jpg" alt="">
</div>
<div class="item">
<img src="images/img-3.jpg" alt="">
</div>
<div class="item">
<img src="images/img-4.jpg" alt="">
</div>
<div class="item">
<img src="images/img-5.jpg" alt="">
</div>
<div class="item">
<img src="images/img-6.jpg" alt="">
</div>
<div class="item">
<img src="images/img-7.jpg" alt="">
</div>
<div class="item">
<img src="images/img-8.jpg" alt="">
</div>
<div class="item">
<img src="images/img-9.jpg" alt="">
</div>
<div class="item">
<img src="images/img-10.jpg" alt="">
</div>
<div class="item">
<img src="images/img-11.jpg" alt="">
</div>
<div class="item">
<img src="images/img-12.jpg" alt="">
</div>
</div>
</body>
</html>
CSS Code:
body{
margin: 0;
background: #f2f2f2;
}
.masonry{
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 1rem;
-moz-column-gap: 1rem;
column-gap: 1rem;
margin: 2.5em;
padding: 0;
font-size: .85em;
}
.item{
display: inline-block;
background: #fff;
padding: 1em;
margin: 0 0 1.5em;
width: 100%;
transition: 1s ease all;
box-sizing: border-box;
box-shadow: 2px 2px 4px 0 #ccc;
}
.item img{
max-width: 100%;
}
@media only screen and (max-width: 320px){
.masonry{
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}
@media only screen and (min-width: 321px) and (max-width: 768px){
.masonry{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
@media only screen and (min-width: 769px) and (max-width: 1200px){
.masonry{
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}
@media only screen and (min-width: 1201px){
.masonry{
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}
Demo
Post a Comment