<head><!--[if lt IE 10]><script src="http://blog.gabrielsaldana.org/wp-content/uploads/2012/02/css3-multi-column.js"></script><![endif]--></head>
<body>
<img width="300" height="220" src="http://farm9.staticflickr.com/8436/7787073628_5fff9a70d1_n.jpg" alt="Yahoo! Hack 2012 India" />
<img width="300" height="202" src="http://farm9.staticflickr.com/8431/7787083378_933c87b6fd_n.jpg" alt="Reid Burke Node.js Presentation" />
<img width="300" height="300" src="http://farm9.staticflickr.com/8360/8332274557_25fc9df0d9_n.jpg" alt="Good Read on a Lazy Afternoon" />
<img width="300" height="225" src="http://farm9.staticflickr.com/8448/7787081028_39feaf1405_n.jpg" alt="Pictrendz Winners" />
<img width="300" height="300" height="202" src="http://farm9.staticflickr.com/8075/8321349902_e89372006b_n.jpg" alt="Afternoon Workspace" />
<img width="300" height="225" src="http://farm5.staticflickr.com/4148/5083309354_cb2dc8c911_n.jpg" alt="Durga Puja" />
<img width="300" height="225" src="http://farm4.staticflickr.com/3482/3948152628_66ea9d4856_n.jpg" alt="Frog" />
<img width="300" height="202" src="http://farm8.staticflickr.com/7117/7787080134_2cd4f6dcf8_n.jpg" alt="Winning Moments" />
<img width="300" height="225" src="http://farm3.staticflickr.com/2774/4019603631_890528fd86_n.jpg" alt="Diyas" />
</body>
body {
width: 900px;
column-count: 3;
column-gap: 20px;
}
img {
display: inline-block;
width: 300px;
margin-bottom: 7px;
}
/*
This demo of --> http://www.code-pal.com/css3-based-masonry-layout-with-jquery-masonry-as-fallback/
Combined w/ tip from --> http://pterkildsen.com/2012/12/08/css3-columns-in-internet-explorer-7-8-and-9/
To use a JavaScript fallback for IE --> http://blog.gabrielsaldana.org/css3-columns-in-internet-explorer-and-other-unsupported-browsers/
*/
This Pen doesn't use any external CSS resources.