Gutter Width on jQuery Masonry / Isotope not working

Question

Im trying to get a Gutter Width of 10px between my Div's, but it doesn't seem to be applying. The Isotope script is working, because the items shuffle around and i have got a filtering navigation to work also.

Im just struggling to get this Gutter! :(

Heres the code:

    $('#main-project-grid').isotope({
        masonry: {
            columnWidth: 313,
            gutterWidth: 10
        }
    });

And here's my HTML:

    <div class="container" id="main">
        <div class="container-content" id="main-grid">

            <div class="post-grid">
                Box Item
            </div>

            <div class="post-grid">
                Box Item
            </div>

            <div class="post-grid">
                Box Item
            </div>

            <div class="post-grid">
                Box Item
            </div>

            <div class="post-grid">
                Box Item
            </div>

        </div>      
    </div>

Solution 1

I have the same problem; I made a jsfiddle to test your example: http://jsfiddle.net/elektrorl/5W5HQ/

edit: http://isotope.metafizzy.co/docs/layout-modes.html#modified_layout_modes >> "Isotope’s methods can be extended and overwritten to shim-in additional functionality."

Solution 2

Changing gutterWidth by "gutter" worked for me:

$('#main-project-grid').isotope({
    masonry: {
        columnWidth: 313,
       "gutter": 10
    }
}); 

Comments

[Michael Giovanni Pumo]

Thanks for that! Just what I was looking for too.

[Denis]

what about gutterHeight? do you have any idea how to made this?

[AfromanJ]

You just have to add a bottom margin (within the CSS) on your 'post-grid' classes for a vertical gutter.

[Ben]

wat? unlike gutterWidth, and contrary to the masonry docs, this actually works! thanks.

[Tanner Hodges]

Wow, can't believe this actually worked. Haven't looked at the source to see why but thanks for the tip! Update: Looks like there is really obscure documentation on this. See masonry: gutter under Element Sizing and this CodePen for an example from the man himself.