desandro
commented
8 years ago Thanks for reporting this issue.
Is there any method for setting a bottom margin via Masonry rather than via CSS?
Sorry nope. I understand your complication with using BEM philosophy and Handlebars templating. But in my experience, the more options Masonry has, the more brittle it becomes. Consider the difficulty of changing bottom margin with a media query, if it were done as a Masonry option. For these reasons, Masonry does not have a bottom margin, or bottom gutter option.
Packery does, however. The size set for gutter is applied for both horizontal and vertical gutters.
Hi, thanks for the great library!
I know that the current docs state that any bottom margins should be handled by CSS, however I'm having some difficulty making this square with OOCSS/BEM CSS methodologies.
These methodologies dictate that css 'objects' (a Masonry item in this case) should be re-usable anywhere on a page, one re-percussion of this is that an object shouldn't set it's own margins as this can break the flow of the page layout, in these cases, any margins or layout are usually handled by a containing div, for example: http://codepen.io/anon/pen/vGgNNo
I've tried setting the bottom margin on the containing div, this works fine when masonry is not enabled, but as soon as I enable Masonry, because the grid item get's positioned absolutely, it's parent container has it's height collapsed and the bottom margin becomes useless.
Edit: The obvious solution would be for me to make Masonry target the container, however this wouldn't be suitable for me as my object is exists as a separate partial template using handlebars.js, this object is used across many pages, some require the bottom padding, other's don't.
Is there any method for setting a bottom margin via Masonry rather than via CSS?
The only solution that comes to mind is adding inline styling via a separate JS function.
Thanks