Responsive grid with masonry - responsive-design

Question

I want to build a responsive masonry grid like THIS
I have this HTML
<div class="js-masonry" data-masonry-options='{ "gutter": 20 }'>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</div>
and the SCSS
article{
width: 100%;
float: left;
#include breakpoint(medium) {
width: 50%;
}
#include breakpoint(large) {
width: 33.33333%;
}
}
When I remove the gutter daclared in the html the grid works as I want, but with it it displays 2 at the large breakpoint and 1 at medium. How can I get this to work with using margins to space out the article horizontally?

Answer 1

The problem is that masonry.js adds a margin to the element making the element 50% + 20px wide, with is to big to fit on one row.
The solution is to make the elements and gutter fit in your wrapper by making the gutter + elements in a row = wrapper. If you have a flexible layout this would be a problem as masonry.js only takes a fixed px as gutter size.
So if (like in you example) you make the elements a fixed width this would be no problem. But masonry.js has a solution; if you sett the gutter not to a fixed width but to a element, masonry.js will use the width of that element. So a flexible solution could be to do this:
<div class="js-masonry"
data-masonry-options='{ "gutter": ".gutter-sizer", "itemSelector": "article"}'>
<div class="gutter-sizer"></div>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</div>
and the Scss
article {
width: 100%;
float: left;
#include breakpoint(medium) {
width: 49.2%;
}
#include breakpoint(large) {
width: 32.26%;
}
}
.gutter-sizer {
width: 0%;
#include breakpoint(medium and large) {
width: 1.6%; //About 20px on a regular monitor at full width.
}
}