jQuery Plugin For Perfect Responsive Grid Layout - Mason

jQuery Mason is a lightweight and easy-to-use jQuery plugin for creating Perfect Responsive Grid Layout for your website. Mason was created to solve a problem with most grid system currently available. Gaps. When using Masonry, Isotope, Grid-A-Licious 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.

Basic Usage:

1. Load the jQuery library and jQuery Mason plugin in the header

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='js/mason.min.js'></script>

2. Create the html for the grid layout

<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>

3. Style the grid box with 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;
}

4. The javascript

<script>
$(function(){
$("#grid").mason({
itemSelector: ".box", // Used to define what element to use
ratio: 1.5, // The ratio to base all element sizes
sizes: [ // the sizes to use for elements
[1,1],
[1,2],
[2,2],
],
columns: [ // The defined breakpoints
[0,480,1],
[480,780,2],
[780,1080,3],
[1080,1320,4],
[1320,1680,5]
],
filler: { //  The filler content ( if left blank Mason will copy elements in grid )
itemSelector: '.fillerBox', 
filler_class: 'custom_filler'
},
layout: 'fluid',
});
});
</script>

More examples:

• Fluid example
• Callback example
• Fixed example
• Fluid Gutters example

Change log:

2015-04-22

• fix

---

This awesome jQuery plugin is developed by DrewDahlman. For more Advanced Usages, please check the demo page or visit the official website.