Percentage width does not work well with gutter

[beforeisleep]

It looks like that percentage width in combination with gutter size will leave undesirable right margin in the grid. By adding a gutter to the codepen demo, you can easily demonstrate this effect: https://codepen.io/desandro/pen/bdgRzg.

It would be great that if, say, item width is set to 20% and gutter of 1, masonry would interpret that as 5 columns and subtract 4 from the total width before calculating the column by dividing the remainder by 5.

[desandro]

Thank you for this feature request.

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

[chughes87]

For others who want a temporary solution for the moment: if you decrease your percentage width by 1% it can produce possibly acceptable results. For example, in the codepen above, if you decrease the percentage width to 32% you will get 3 columns rather than two. In my case, I want two columns. So I just set my width to 49%.

[desandro]

I think the most straight forward solution is to use calc to set the width of item. This allows you to mix percent and pixel values. For example, if you want 3 columns with two gutters of 10px each:

.grid-sizer,
.grid-item {
  width: calc((100% - 20px)/3);
}

See demo https://codepen.io/desandro/pen/MqqwbW

[ariellevitsky]

Hey guys,

A simple workaround is to use padding instead of gutter.

Specifically:

1. Remove gutter from your Masonry options
2. Add a padding to all of your grid items (ensure that you specify box-sizing: border-box)
3. Use percentages intuitively (i.e. a 2 column layout would have 2 items of 50% each)

CSS

.grid {
	width: 100%;
	margin: -20px; /*To counteract the padding*/
}

.grid-item {
	padding: 20px;
	box-sizing: border-box;
}

.sizer {
	width: 10%;
	box-sizing: border-box;
}

/*Classes added in addition to grid-item*/

.grid-item-50 {
	width: 50%;
}

.grid-item-30 {
	width: 30%;
}

.grid-item-70 {
	width: 70%;
}

In this case I used a sizer of 10%, consequently the widths have to be multiples of 10. If you would like to use a different set of widths, make sure you modify the sizer first.

[showhan]

This solution is without the static grid-sizer.

.grid-item{
	width: calc((100% - 60px)/3);
	max-width: calc((100% - 60px)/3);
}
/* 2 Columns */
.grid-item{
	width: calc((100% - 30px)/2);
	max-width: calc((100% - 30px)/2);
}

Gutter is 30. Here the width is coming from the grid item's width (both column and item-selector).

var $grid = $('.grid-wrapper').masonry({
	itemSelector: '.grid-item',
	columnWidth: '.grid-item',
	percentPosition: true,
	gutter: 30
});
$grid.imagesLoaded().progress( function() {
	$grid.masonry('layout');
});

Thanks

[lucaorio]

I think the most straight forward solution is to use calc to set the width of item. This allows you to mix percent and pixel values. For example, if you want 3 columns with two gutters of 10px each:

.grid-sizer,
.grid-item {
  width: calc((100% - 20px)/3);
}

See demo https://codepen.io/desandro/pen/MqqwbW

This way we'd lose the responsiveness though, am I correct?