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!

Colleague suggested wrapping .masonry in a container, then adding negative margin-right on .masonry equal to the gutter width. This works but would prefer a fix than a hack... :) — iamkeir, Jul 30 '13 at 12:36

score 13 · Answer 1 · answered Jul 30 '13 at 12:59

13

@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

answered Jul 30 '13 at 12:59

iamkeir

2,429
2
16
21

That makes sense, just a shame I didn't think of that myself :( – johna Sep 04 '15 at 04:43

score 1 · Answer 2 · answered Feb 19 '16 at 00:34

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;
            }
        }

score 0 · Answer 3 · answered Jul 30 '13 at 12:42

0

You can try wookmark or packery to remove the right gutter.

answered Jul 30 '13 at 12:42

Gigamegs

12,342
7
31
71

Thanks for your input - desandro (the Masonry dev) actually realised it was an issue with my % calculations. – iamkeir Jul 30 '13 at 12:59

Masonry: remove gutter from last column

3 Answers3