<div id="wrapper">
<div id="columns">
<div class="pin" ><div style="height:50px"></div></div>
<div class="pin" ><div style="height:30px"></div></div>
<div class="pin" ><div style="height:30px"></div></div>
<div class="pin" ><div style="height:50px"></div></div>
<div class="pin" ><div style="height:60px"></div></div>
<div class="pin" ><div style="height:90px"></div></div>
<div class="pin" ><div style="height:30px"></div></div>
<div class="pin" ><div style="height:40px"></div></div>
<div class="pin" ><div style="height:80px"></div></div>
<div class="pin" ><div style="height:80px"></div></div>
<div class="pin" ><div style="height:100px"></div></div>
<div class="pin" ><div style="height:50px"></div></div>
<div class="pin" ><div style="height:30px"></div></div>
<div class="pin" ><div style="height:30px"></div></div>
<div class="pin" ><div style="height:50px"></div></div>
<div class="pin" ><div style="height:60px"></div></div>
<div class="pin" ><div style="height:70px"></div></div>
<div class="pin" ><div style="height:30px"></div></div>
<div class="pin" ><div style="height:40px"></div></div>
<div class="pin" ><div style="height:80px"></div></div>
<div class="pin" ><div style="height:80px"></div></div>
<div class="pin" ><div style="height:40px"></div></div>
</div>
</div>
body{
background: #607d8b;
}
#wrapper {
max-width: 600px;
margin: 50px auto;
}
.pin {
display: inline-block;
width:100%;
margin-bottom:2px;
}
.pin div{
background: #80DEEA;
padding:20px;
border-radius:5px;
}
#columns {
column-gap: 5px;
column-count: 5;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.