Mason.js - Creating a perfect grid with jQuery

Mason.js is a jQuery plugin that allows you to create a perfect grid of elements.

Mason was created to solve a problem with most grid system currently available. When using Masonry, Isotope  or any of the other grid plugins out there sometimes your grid will contain gaps or ragged edges. Mason was made to fill those gaps in.

Built on the idea of true masonry when a grid is constructed there are bound to be holes, so Mason calculates where those holes are fills them in.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: masonjs.com

1. INCLUDE JS FILES

<script src='js/jQuery.js'></script>
<script src='js/mason.min.js'></script>

2. HTML

<div id='grid'>
	<div class='box'>1</div>
	<div class='box'>2</div>
	<div class='box'>3</div>
	<div class='box'>4</div>
	<div class='box'>5</div>
	<div class='box'>6</div>
	<div class='box'>7</div>
	<div class='box'>8</div>
</div>
<div id='fillers'>
	<div class='fillerBox'>1</div>
	<div class='fillerBox'>2</div>
	<div class='fillerBox'>3</div>
	<div class='fillerBox'>4</div>
	<div class='fillerBox'>5</div>
</div>

3. JAVASCRIPT

$(function(){
	$("#grid").mason({
		itemSelector: ".box",
		ratio: 1.5,
		sizes: [
			[1,1],
			[1,2],
			[2,2]
		],
		columns: [
			[0,480,1],
			[480,780,2],
			[780,1080,3],
			[1080,1320,4],
			[1320,1680,5]
		],
		filler: {
			itemSelector: '.fillerBox',
			filler_class: 'custom_filler'
		},
		layout: 'fluid',
	});
});

4. CSS

#grid{
	width: 100%; 
	position: relative;
	font-size: 25px;
	font-family: 'Helvetica';
	color: #eaeaea;
}
.box {
	background-color: #c23822;
	box-shadow: 0px 0px 1px #222;
	float: left;
	position: relative;
}
#fillers{
	display: none;
}
.fillerBox {
	background-color: #751e11;
	box-shadow: 0px 0px 1px #222;
	float: left;
	position: relative;
}

5. OPTIONS

Mason.js has a number of options:

$("#container").mason({
    itemSelector: ".box",
    ratio: 1.5,
    sizes: [
        [1,1],
        [1,2],
        [2,2]
    ],
    columns: [
        [0,480,1],
        [480,780,2],
        [780,1080,3],
        [1080,1320,4],
        [1320,1680,5]
    ],
    filler: {
        itemSelector: '.fillerBox',
        filler_class: 'custom_filler'
    },
    layout: 'fluid',
    gutter: 10
},function(){
    console.log("COMPLETE!")
});

• itemSelector
  • the element that makes up your grid
• ratio
  • The ratio is a number that is used to create the blocks based on column count and width.
• sizes
  • Sizes are an array of sizes you wish to use in your grid. These are composed of block numbers. ( ex: [1,1] means 1 block high, 1 block wide )
• columns
  • columns are an array of break points for your columns. Think of this like media queries. start small and grow. They should be formatted as [min,max,cols]
• filler
  • itemSelector: This describes the elements to be used to fill in blank spaces. This will default to the original itemSelector if there is nothing
  • filler_class: This is a class given to filler elements within the grid, used for cleaning up if a grid set to fluid
• Layout
  • There are two layouts, fluid and fixed. Mason will default to fixed. Fluid means it will be responsive.
• Callback
  • You can add a callback function to Mason to notify you when the grid has completed building.
• Gutter
  • Allows you to add spacing between the elements, think of this as a margin.

• Fluid
• Fixed
• Fluid Gutters