Add responsive gutter
Hey,
This is a feature request for having the gutter size based on the media queries. Gutter is currently a string on the Masonry component, so there are a couple of ways to go about this. I don't mind doing the legwork if I can get some direction...
Hi @bell-steven 👋🏻 sorry for the delay.
It's a good idea. I think the best option is to add gutterBreakPoints like columnsCountBreakPoints. What do you think ?
Totally agree. I would suggest that it be an entirely optional prop, with no set defaults, or default of 0. What is the reason for making the number value a string?
The reason was that you can put "10px" or "1.5rem" for example depends of your preferences
As a workaround, you can use CSS clamp():
// 10px if screen width < 700px, 20px otherwise
<ReactMasonry gutter="clamp(10px, (100vw - 700px) * 99, 20px)">
why was this closed? the commits pushed to the documentation is unrelated to this functionality?
PR's are welcome 🙂 You can add gutterBreakPoints prop
Fixed in #136 👍🏻
Thanks @kriskuiper 🙂