Masonry: remove gutter from last column

Question

Been working with the new version of Masonry which seems to work much smoother, especially for the fluid/responsive build I am doing.

One issue I have encountered, however - I am not sure how to remove the gutter on the far right of the .masonry container so that items are flush with the edge.

Here is the codepen example: http://codepen.io/iamkeir/pen/xlcBj

I could potentially set a width and overflow:hidden to crop off that last gap, but not ideal.

Equally, I tried adding a padding-left: 1% but this changes the width of the container so the percentages are no longer accurate.

Any ideas/tips would be greatly appreciated!

Answer 1

@desandro kindly tweeted the solution - the issue was with my % calculations which should have been:

(container width - (columns * column width)) / number of gutters = gutter width

So, in my example: (100% - (4 * 24%)) / 3) = 1.33333333333333%

http://codepen.io/desandro/pen/ybluC

Answer 2

I was able to do this with calc(). Using 0 margin, 0 padding, a 20px gutter and a 1200px grid, here's a design for 1, 2, 3 and 4 columns that are flush left and right. Calc -10px would wrap, so I had to use -11px in my calculation:

        #grid .item {
            float: left;
            padding: 0;
            width: 100%;
            margin: 0;
        }

        @media only screen and (min-width: 500px) {
            #grid .item {
                width: calc(50% - 11px);
            }
        }

        @media only screen and (min-width: 800px) {
            #grid .item {
                width: calc(33% - 11px);
            }
        }

        @media only screen and (min-width: 1200px) {
            #grid .item {
                width: 285px;
            }
        }