react-responsive-masonry icon indicating copy to clipboard operation
react-responsive-masonry copied to clipboard

Add responsive gutter

Open bell-steven opened this issue 8 years ago • 6 comments

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...

bell-steven avatar Oct 03 '17 04:10 bell-steven

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 ?

cedricdelpoux avatar Nov 14 '17 16:11 cedricdelpoux

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?

bell-steven avatar Nov 15 '17 00:11 bell-steven

The reason was that you can put "10px" or "1.5rem" for example depends of your preferences

cedricdelpoux avatar Nov 15 '17 07:11 cedricdelpoux

As a workaround, you can use CSS clamp():

// 10px if screen width < 700px, 20px otherwise
<ReactMasonry gutter="clamp(10px, (100vw - 700px) * 99, 20px)">

linobino1 avatar Jul 21 '24 09:07 linobino1

why was this closed? the commits pushed to the documentation is unrelated to this functionality?

baranelitez avatar Aug 05 '24 12:08 baranelitez

PR's are welcome 🙂 You can add gutterBreakPoints prop

cedricdelpoux avatar Aug 06 '24 06:08 cedricdelpoux

Fixed in #136 👍🏻

kriskuiper avatar Jan 22 '25 15:01 kriskuiper

Thanks @kriskuiper 🙂

cedricdelpoux avatar Jan 24 '25 08:01 cedricdelpoux