Tommy's Masonry

by andyjh07

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--[if lte IE 9]>
<script src="masonry.pkgd.min.js"></script>
<![endif]-->

<div class="masonry">
    <div class="item">
		<img class="img-responsive" src="https://www.tommyreynolds.co.uk/images/uploads/portfolio/Rosa_1-2_small.jpg" alt="">
    </div>
	<div class="item">
		<img class="img-responsive" src="https://www.tommyreynolds.co.uk/images/uploads/portfolio/Matthew_Crane_Shoot_1.jpg" alt="">
    </div>
    <div class="item">
		<img class="img-responsive" src="https://www.tommyreynolds.co.uk/images/uploads/portfolio/Nick-Howard-Hasselblad.jpg" alt="">
    </div>
    <div class="item">
		<img class="img-responsive" src="https://www.tommyreynolds.co.uk/images/uploads/portfolio/Sri-Lanka.jpg" alt="">
    </div>
	<div class="item">
		<img src="https://www.tommyreynolds.co.uk/images/uploads/portfolio/Indian-Sadu.jpg" alt="" class="img-responsive">
	</div>
	<div class="item">
		<img src="https://www.tommyreynolds.co.uk/images/uploads/portfolio/Jamie-Johnson-The-Voice-2.jpg" alt="" class="img-responsive">
	</div>
	<div class="item">
		<img src="https://www.tommyreynolds.co.uk/images/uploads/portfolio/PauperKings1.jpg" alt="" class="img-responsive">
	</div>
	<div class="item">
		<img src="https://www.tommyreynolds.co.uk/images/uploads/portfolio/Samantha-Dorrance.jpg" alt="" class="img-responsive">
	</div>
</div>

CSS

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

.wrapper {
    width: 100%;
    margin: 3em 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;
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;	
}

.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}

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