poristo/jquery.responsivegrid

Responsive grid plugin

jquery.responsivegrid

Responsive grid plugin

Markup:

<div class="grid">
	<div class="grid-item" data-colspan="2" data-rowspan="2"></div>
	<div class="grid-item" data-colspan="2" data-rowspan="1"></div>
	<div class="grid-item" data-colspan="2" data-rowspan="1"></div>
	<div class="grid-item" data-colspan="2" data-rowspan="2"></div>
	<div class="grid-item" data-colspan="2" data-rowspan="1"></div>
	<div class="grid-item" data-colspan="2" data-rowspan="1"></div>
	<div class="grid-item" data-colspan="2" data-rowspan="2"></div>
	<div class="grid-item" data-colspan="2" data-rowspan="1"></div>
	<div class="grid-item" data-colspan="2" data-rowspan="1"></div>
</div>

Using without breakpoints:

<script type="text/javascript">
	$('.grid').responsivegrid({
		'column' : 4,
		'gutter' : '5px',
		'itemHeight' : '80%',
	});
</script>

Using with breakpoints:

<script type="text/javascript">
	$('.grid').responsivegrid({
		'breakpoints': {
			'desktop' : {
				'range' : '*',
				'options' : {
					'column' : 6,
					'gutter' : '20px',
					'itemHeight' : '80%',
				}
			},
			'tablet-landscape' : {
				'range' : '1000-1200',
				'options' : {
					'column' : 4,
					'gutter' : '15px',
					'itemHeight' : '70%',
				}
			},
			'tablet-portrate' : {
				'range' : '767-1000',
				'options' : {
					'column' : 3,
					'gutter' : '10px',
					'itemHeight' : '60%',
				}
			},
			'mobile' : {
				'range' : '-767',
				'options' : {
					'column' : 2,
					'gutter' : '5px',
					'itemHeight' : '50%',
				}
			},
		}
	});
</script>

Options:

'column' : number of blocks per line
by default: 4

'gutter' : space between blocks. You can use 'px' and '%' (percent from .grid block width)
By default: 10px

'itemHeight' : item height. You can use 'px' and '%' (percent from .grid-item block width)
by default: 100%

'itemSelector' : selector for children blocks
by default: '.grid-item'

IE9+, Chrome, FF, Safari