jQuery masonry fluid gutter fix

Question

For the life of me I cannot figure out how to remove the wide gutters and set to 0 when using the fluid/percentage layout.

I've tried setting gutterWidth: 0 and the margin and padding to 0%, but it still doesn't work.

Here is the code from the Masonry site.

$('#container').masonry({
    itemSelector: '.box',
    gutterWidth:0,
// set columnWidth a fraction of the container width
    columnWidth: function (containerWidth) {
        return containerWidth / 5;
    }
});

CSS

.box {
    width:33%;
    margin:0%;
    padding:0%
}
.box img {
    width:100%;
    height:auto
}

What do I have to adjust?

score 5 · Answer 1 · answered Oct 06 '14 at 20:53

5

I had a similar issue using Masonry with a percentage-based layout. For me, it ended up being a problem with the browser scrollbar. The width was calculated without the scrollbar. After Masonry ran, the measurements were slightly off because the scrollbar appeared. I was able to solve the issue by adding the following CSS:

body { overflow-y:scroll; }

This forces the scrollbar, even if it isn't needed, which makes the calculations accurate and fixes the gutters.

Hopefully this helps someone else.

answered Oct 06 '14 at 20:53

nathan

51
1
2

100% worked and the correct answer! If you're using the masonry plugin and there are unexplained gaps driving you up the wall ... then try the answer above. This issue happened to me when using this [PEN](http://codepen.io/tpalmer75/pen/FijEh) – user3364730 Oct 15 '15 at 22:43

score 0 · Answer 2 · answered Jun 18 '12 at 11:03

Look a little closer at what the masonry code is doing:

When you set the column width the function is returning a math result that takes the container width and divides it by 5. However in your css your box width is a 3rd of the parent. So masonry is trying to put 3rd width boxes into 5th width columns.

This is most likely your problem here, however masonry and fluid layouts can be tricky so that might not be all...

jQuery masonry fluid gutter fix

2 Answers2