MasonJS

By: Drew Dahlman

What is it?

Mason is a jQuery plugin that helps you create a perfect grid with no gaps and no ragged edges. It Works by mapping elements in a grid, finding where gaps are and filling them in as a stone mason would do.

MasonJS is not Masonry, Isotope, Packery, Gridilicious or any of those other grid plugins. It is for creating perfect grids.

Example

Below is a basic example of Mason at work.

$("#grid-a").mason({
    itemSelector: '.box',
    ratio: 1.2,
    sizes: [
        [1,1],
        [1,2],
        [2,1]
    ],
    columns: [
        [0, 480, 3],
        [480, 1920, 5]
    ],
    filler: {
        itemSelector: '.filler',
        filler_class: 'mason-filler'
    },
    gutter: 5,
    layout: 'fluid'
});
                

How does it work?

Mason works by flowing a grid of floated elements as a normal CSS layout, then measuring the dimensions of the blocks and total grid area. It then detects where gaps are and fills them.

It uses fillers to fill in gaps. Fillers are elements that you can define or it will reuse elements within the grid.

Toggle on / off

$("#grid-b").mason({
    itemSelector: '.box',
    ratio: 1.5,
    sizes: [
        [1,1],
        [1,2],
        [2,1]
    ],
    columns: [
        [0, 480, 6]
    ],
    filler: {
        itemSelector: '.filler',
        filler_class: 'mason-filler'
    },
    gutter: 5,
    layout: 'fluid'
});
                

1

2

3

4

5

6

7

8

9

10

Promoted Options

You can tell mason to promote specific elements if you want by assigning a class and telling mason in the config. Notice in this grid nothing changes on refresh.

$("#grid-c").mason({
    itemSelector: '.box',
    ratio: 1,
    sizes: [
        [1,1],
    ],
    promoted: [
        ['large', 3, 3],
        ['tall', 1, 3],
        ['wide', 3, 2]
    ],
    columns: [
        [0, 480, 6]
    ],
    filler: {
        itemSelector: '.filler',
        filler_class: 'mason-filler'
    },
    gutter: 5,
    layout: 'fluid'
});
                

1 Large

2 tall

3

4 wide

5 tall

6 tall

7

8 large

9

10

Options

Mason comes with many options for setting up your grid:

$("#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]
    ],
    promoted: [
        ['class_name', 2, 1],
        ['class_name', 2, 3],
        ['class_name', 3, 3],
    ],
    filler: {
        itemSelector: '.fillerBox',
        filler_class: 'custom_filler',
        keepDataAndEvents: false
    },
    layout: 'fluid',
    gutter: 10
},function(){
    console.log("COMPLETE!")
});
                

Destroy

When you need to destroy a mason object you can call the destroy method which will remove all listeners on the mason object. Note that it will not remove any elements, just simply stop mason from responding

var mason = $("#container").masion({
    itemSelector: '.box',
    ratio: 1.5,
    sizes: [
        [1,1],
        [1,2],
        [2,1]
    ],
    columns: [
        [0, 480, 6]
    ],
    filler: {
        itemSelector: '.filler',
        filler_class: 'mason-filler'
    },
    gutter: 5,
    layout: 'fluid'
});

function destroy_mason(){
    mason.destroy();
}
                

This is rad! I want to make some grids!

Check out the GitHub project for more information & use!

Fork me on GitHub