Spope/MiniMasonry.js

When there is 1 column, `.gutterY` is ignored

Opened this issue · 2 comments

duzun commented

The line with this._count = 1; looks strange to me.

In my use-case I update MiniMasonry options on resize, depending on the CSS properties of the elements of the grid, and for some screen sizes there is only one column, even though there are many items (._count > 1).
And when there is only one columns with many items, the gutter between the items is missing.

My guess is that #L139 is the issue here, it "thinks" there is only one item and there is no need of margin-bottom, but in reality there is only one column with many items.

Spope commented

Hello,
The count you are mentioning is not the items count, it's the number of columns that can fit in the container with your parameters. What happens here is that when only 1 column can fit, gutters are overridden by ultimateGutter parameter.

The problem is that the value of this parameter is set to gutters X and Y, and so both are equals.
I wanted to add the possibility to specify both X an Y ultimateGutter but I think I will remove the basic gutter parameter first because it's already confusing.

For now try increasing your ultimateGutter and you should see the margin between your items on a 1 column display.

duzun commented

Thanks for clarification!
So the issue in my case is that I want zero gutterX and non-zero gutterY for one column display, but MiniMasonry uses ‘ultimateGutter’ for both. I would need ‘ultimateGutterX’ = 0 and ‘ultimateGutterY‘ = #.

Also the ‘gutter’ option makes sense for simple setup, IMHO.

Meanwhile I’ve fixed the issue by setting ‘gutter’ = 0 and adding it with padding in CSS. Here is the result: artcer.ru/jurnal