Masonry only css

by Glynne Turner

HTML

<div class="title"><h1>Responsive CSS Masonry</h1></div>
	<div class="masonry">
		<div class="item"><img src="http://w3bits.com/wp-content/uploads/masonry.jpg" /></div>
		<div class="item">Text-only masonry block.</div>
		<div class="item">
			<img src="http://media-cache-ec0.pinimg.com/736x/c3/10/22/c3102281f88237e7a2515099d2e6651f.jpg" />
		</div>
		<div class="item">
			<img src="http://media-cache-ec0.pinimg.com/736x/0f/d0/84/0fd0847f7b48e5f16d896f62baa31b97.jpg" />
		</div>
		<div class="item">
			<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=+&amp;q=taj+mahal&amp;ie=UTF8&amp;hq=&amp;hnear=&amp;ll=27.175015,78.042155&amp;spn=0.006295,0.006295&amp;t=m&amp;output=embed"></iframe>
		</div>
		<div class="item">
			<a href="https://twitter.com/w3bits_">I tweet sometimes.</a>
		</div>
		<div class="item">
			<img src="http://media-cache-ak0.pinimg.com/736x/2e/7f/db/2e7fdb7ed765973407fed0b0141bb126.jpg" />
			<h2>A block with a headline using &lt;h2&gt; tag.</h2>
		</div>
		<div class="item">
			<img src="http://media-cache-ec0.pinimg.com/600x/0b/87/f4/0b87f4eb50b3d7a7c9d70d97234753ab.jpg" /><br />
			Lorem ipsum dolor sit amet, dicta dolore adipisci hic ipsam velit deleniti possimus cumque accusantium rerum quibusdam.
		</div>
		<div class="item">
			<img src="http://media-cache-ec0.pinimg.com/600x/95/11/02/951102f18d5a50c3ca483e93c6f92f5a.jpg" />
		</div>
		<div class="item">
			<iframe width="640" height="390" src="http://www.youtube.com/embed/cwGq-uy0bhI" frameborder="0" allowfullscreen></iframe>
		</div>
		<div class="item">
			<a href="https://plus.google.com/+w3Bits">Circle me on Google+</a>
		</div>
		<div class="item">
			<iframe src="http://player.vimeo.com/video/91605331" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
		</div>
		<div class="item">
			<img...

CSS

body {
    font: 1em/1.67 Arial, Sans-serif;
    margin: 0;
    background: #e9e9e9;
}