Masonry Grid-sizer with gutter not aligning correctly on 50% size

Question

I have grid-sizer masonry and a div with of 50%. I have also put a gutter of '10' but it doesn't seem to equalize the boxes accordingly.

The red boxes is not align with the whole container. The width of the .w2 red boxes are %49 to make the gutter (margin) appear. If I make it 50%, the div will align but the gutter will not be as equal as the others.

How can I align the divs perfectly using the grid-sizer and with a gutter of 10?

See my fiddle here...

here's my code:

var $container = $('#container');
$container.isotope({
masonry: {
columnWidth: '.grid-sizer',
       gutter: 10
},
itemSelector: '.item'
});

score 1 · Answer 1 · answered May 20 '14 at 09:11

The gutter size that you are using is not dynamic. The gutter size should be declared in the css.

Updated Code:

var $container = $('#container');
// init
$container.isotope({
// options
masonry: {
  columnWidth: '.grid-sizer',
  gutter: '.gutter-sizer'
},
itemSelector: '.item'
});

CSS:

.gutter-sizer { width: 1%; }

Updated Fiddle here

Masonry Grid-sizer with gutter not aligning correctly on 50% size

1 Answers1