Masonry only css

by Symphony

HTML

<div class="wrapper">
	<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...

CSS

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

img, iframe {
max-width: 100%;
height: auto;
display: block;
}

.wrapper {
    width: 90%;
    margin: 1.5em auto;
}

.masonry {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}

.item {
    display: inline-block;
    background: #fff;
    padding: 1.5em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.18);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.title, .footer {
text-align: center;
}

.title {
font-size: 1.75em;
margin: .25em 0;
}

.title a {
display: inline-block;
padding: .75em 1.25em;
color: #888;
border: 2px solid #aaa;
margin: .25em 1em 1em;
text-decoration: none;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
}

.title {
color: #666;
}

.title a:hover {
color: #666;
border-color: #888;
}


.share-link,
.article-link {
color: #888;
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}