CODEWITHSUNDEEP
jqueryjquery-isotope
Jason Mayo
Jason Mayo

Reputation: 356

Gutter Width on jQuery Masonry / Isotope not working

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>

Upvotes: 2

Views: 16905

Answers (2)

Marc
Marc

Reputation: 321

Changing gutterWidth by "gutter" worked for me:

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

Upvotes: 5

elektrorl
elektrorl

Reputation: 620

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

Upvotes: 6

Related Questions