Wrong gutter of the grid item if its width is different

[codyng]

Hi there,

I've just first tested this amazing library and tried a simple usage. Let's say the default (and first item) item is 200px in width. The gutter is 10px. Everything is fine.

However, I've tried to make one of the grid item to be > 200px width, or < 200px width and it did not show the correct gutter.

I don't understand why it has the wrong gutter like the screenshots (in both cases).

Thanks.

When the width of the 3rd item is 300px:

When the width of the 3rd item is 100px:

options is at below:

{
    columnWidth: 200,
    itemSelector: '.grid-item',
    gutter: 10
}

CSS with the wider (or shorter) item for test:

.grid-item--width2 {
    width: 100px;
    background: #EFEFEF;
}

Expected result: all gutters are in 10px width. (Using "masonry-layout": "4.2.2")

[robfaas]

What about: { columnWidth: 100, itemSelector: '.grid-item', gutter: 10 } And: .grid-item--width2 { width: 210px; /* 2 columns+1 gutter / background: #EFEFEF; } .grid-item--width3 { width: 320px; / 3 columns+2 gutters */ background: #AFAFAF; }