Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When there is 1 column, .gutterY is ignored #8

Open
duzun opened this issue Apr 5, 2021 · 2 comments
Open

When there is 1 column, .gutterY is ignored #8

duzun opened this issue Apr 5, 2021 · 2 comments

Comments

@duzun
Copy link
Contributor

duzun commented Apr 5, 2021

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
Copy link
Owner

Spope commented Apr 6, 2021

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
Copy link
Contributor Author

duzun commented Apr 7, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants