<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.