Latest ChampGrid

by Dhruvang Gajjar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/dhruvangg/Champ-Grid/master/ChampGrid.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<section class="blogs">
<div class="container">
	<div class="item a wow bounceInUp">A</div>
	<div class="item b wow bounceInUp">B</div>
	<div class="item c wow bounceInUp">C</div>
	<div class="item d wow bounceInUp">E</div>
	<div class="item a wow bounceInUp">F</div>
	<div class="item b wow bounceInUp">G</div>
	<div class="item c wow bounceInUp">H</div>
	<div class="item d wow bounceInUp">I</div>
	<div class="item a wow bounceInUp">A</div>
	<div class="item b wow bounceInUp">B</div>
	<div class="item c wow bounceInUp">C</div>
	<div class="item d wow bounceInUp">E</div>
	<div class="item a wow bounceInUp">F</div>
	<div class="item b wow bounceInUp">G</div>
	<div class="item c wow bounceInUp">H</div>
	<div class="item d wow bounceInUp">I</div>
	<div class="item a wow bounceInUp">A</div>
	<div class="item b wow bounceInUp">B</div>
	<div class="item c wow bounceInUp">C</div>
	<div class="item d wow bounceInUp">E</div>
	<div class="item a wow bounceInUp">F</div>
	<div class="item b wow bounceInUp">G</div>
	<div class="item c wow bounceInUp">H</div>
	<div class="item d wow bounceInUp">I</div>
</div>	
</section>

CSS

*{box-sizing: border-box;margin:0;padding:0;}
.blogs{float: left;width: 100%;}
.container{max-width: 1170px;margin: 0 auto;position: relative;width: 100%;}
.item{font-size:60px;display: flex;justify-content: center;align-items: center;}
.a{height: 250px;background-color: #e2e2e2;}
.b{height: 350px;background-color: #ccc;}
.c{height: 400px;background-color: #aaa;}
.d{height: 300px;background-color: #999;}

JavaScript

$(document).ready( function($) {
		new WOW().init();
		jQuery('.container').ChampGrid({
				itemPath	: ".item",
				columns		: 3,
				gutter		: "5px solid #fff"
		});
});
$(window).resize( function($) {
		jQuery('.container').ChampGrid({
				itemPath	: ".item",
				columns		: 3,
				gutter		: "5px solid #fff"
		});
});