I am using jQuery Isotope. It's a great plugin but I'm having a little issue with aligning the items in masonry mode. My container is 960px wide and my goal is to get 4 items to line up perfectly as if it were using the 960px grid system. So, both the left and right edges would be touching the the edge of the container. Here is a screen shot of how it looks at the moment:

My code is currently like so:

JS:

$('#container').isotope({
  itemSelector : '.item',
      masonry : {
          columnWidth : 240,
          gutterWidth: 10
      }
});

CSS:

.item{
width:230px;
background:red;
overflow: hidden;
}

HTML:

 <div class="item">a</div>

So far the only way I have managed to get it to work is to set the width to 240px but then there is no gap between the items.

EDIT

Here is a fiddle showing what I have /

I am using jQuery Isotope. It's a great plugin but I'm having a little issue with aligning the items in masonry mode. My container is 960px wide and my goal is to get 4 items to line up perfectly as if it were using the 960px grid system. So, both the left and right edges would be touching the the edge of the container. Here is a screen shot of how it looks at the moment:

My code is currently like so:

JS:

$('#container').isotope({
  itemSelector : '.item',
      masonry : {
          columnWidth : 240,
          gutterWidth: 10
      }
});

CSS:

.item{
width:230px;
background:red;
overflow: hidden;
}

HTML:

 <div class="item">a</div>

So far the only way I have managed to get it to work is to set the width to 240px but then there is no gap between the items.

EDIT

Here is a fiddle showing what I have http://jsfiddle/qGJhe/

• javascript
• jquery
• css
• jquery-masonry

Share Improve this question Follow edited Mar 17, 2013 at 14:20 asked Mar 13, 2013 at 21:46 user1157393user1157393 5

• Do your columns touch the edges of your container without using isotope (just using float)? – Jason Varga Commented Mar 13, 2013 at 22:06
• no, currently I dont have any grid or css on it. other than above. If it wasn't dynamically generated i'd just adjust the margin on the last one but I can't do that. What I want is for 3 columns to nicely take up the space of 960px – user1157393 Commented Mar 13, 2013 at 22:10
• Would be better if you recreate the page in jsFiddle since it would make it easier for us to debug it :) – kyooriouskoala Commented Mar 15, 2013 at 3:15
• ok, I will get that done asap. – user1157393 Commented Mar 15, 2013 at 10:05
• Here is a fiddle: jsfiddle/qGJhe – user1157393 Commented Mar 17, 2013 at 14:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Based on your jsFiddle (http://jsfiddle/qGJhe/), I added background color for the container to check the extra gap that you're having issue with but it shows no extra gap.

Also, it doesn't honor your 960px width as the layout is responsive. So it seems to me that you didn't copy exactly the same codes (html, css, jQuery) that you have on your actual page.

Anyway, I disabled the responsive code bit to make it honor the fixed 960px width and saw that extra gap of 10px. http://jsfiddle/shodaburp/qGJhe/3/

That made me realised that your calculation for the gutter size as well as the width of the element are rather inaccurate.

Element width of 240px will not give you space for gutter at all. http://jsfiddle/shodaburp/qGJhe/4/

gutterSize = (containerWidth - (elementWidth * numberOfElement) / numberOfGutters)

gutterSize = (960 - (240 * 4) ) / 3) = 0

totalWidth = (elementWidth * numberOfElement) + (gutterSize * numberOfGutters)

totalWidth = (240 * 4) + (3 * 0) = 960

extraGap = containerWidth - totalWidth

extraGap = 960 - 960 = 0

Element width of 230px plus gutter size of 13 will give you 1px of extra gap http://jsfiddle/shodaburp/qGJhe/5/

gutterSize = (containerWidth - (elementWidth * numberOfElement) / numberOfGutters)

gutterSize = (960 - (230 * 4) ) / 3) = 13.33 = 13 (rounded)

totalWidth = (elementWidth * numberOfElement) + (gutterSize * numberOfGutters)

totalWidth = (230 * 4) + (3 * 13) = 959

extraGap = containerWidth - totalWidth

extraGap = 960 - 959 = 1

If you want to have 4 elements in a row to fit in nicely within 960px, then you'd need to reduce the width of the element to 225px and have gutter size of 20px.

Element width of 225px plus gutter size of 20 will be perfect! http://jsfiddle/shodaburp/qGJhe/6/

gutterSize = (containerWidth - (elementWidth * numberOfElement) / numberOfGutters)

gutterSize = (960 - (225 * 4) ) / 3) = 20

totalWidth = (elementWidth * numberOfElement) + (gutterSize * numberOfGutters)

totalWidth = (225 * 4) + (3 * 20) = 960

extraGap = containerWidth - totalWidth

extraGap = 960 - 960 = 0

Have you added the modified layout mode?

Using gutterWidth isn't a standard option. The docs say that you need to add the code from the source of the demo page.

http://isotope.metafizzy.co/custom-layout-modes/masonry-gutters.html

// modified Isotope methods for gutters in masonry
$.Isotope.prototype._getMasonryGutterColumns = function() {
  var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0;
      containerWidth = this.element.width();

  this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth ||
                // or use the size of the first item
                this.$filteredAtoms.outerWidth(true) ||
                // if there's no items, use size of container
                containerWidth;

  this.masonry.columnWidth += gutter;

  this.masonry.cols = Math.floor( ( containerWidth + gutter ) / this.masonry.columnWidth );
  this.masonry.cols = Math.max( this.masonry.cols, 1 );
};