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.

Sign up for GitHub

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

Jump to bottom

Add responsive gutter #6

Open
bell-steven opened this issue Oct 3, 2017 · 6 comments
Open

Add responsive gutter #6

bell-steven opened this issue Oct 3, 2017 · 6 comments
Labels
enhancement help wanted

Comments

@bell-steven
Copy link
Contributor

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...
@cedricdelpoux
Copy link
Owner

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 ?

@bell-steven
Copy link
Contributor Author

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?

@cedricdelpoux
Copy link
Owner

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

@louiechristie louiechristie mentioned this issue Dec 19, 2021
Merged
cedricdelpoux pushed a commit that referenced this issue Jan 8, 2022
@louiechristie
docs: Add examples of using gutter (#66)
142336a 
To help people avoid getting this error by using a number:
Warning: Failed prop type: Invalid prop `gutter` of type `number` supplied to `Masonry`, expected `string`.

Also to illustrate how to have responsive gutters because this was not obvious, see:
#6 (comment)
Akaqlonist pushed a commit to Akaqlonist/react-masonry-grid that referenced this issue Apr 28, 2022
@cednore
docs: Add examples of using gutter (#66)
3011de1 
To help people avoid getting this error by using a number:
Warning: Failed prop type: Invalid prop `gutter` of type `number` supplied to `Masonry`, expected `string`.

Also to illustrate how to have responsive gutters because this was not obvious, see:
cedricdelpoux/react-responsive-masonry#6 (comment)
@linobino1
Copy link

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

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

@baranelitez
Copy link

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

@cedricdelpoux
Copy link
Owner

cedricdelpoux commented Aug 6, 2024 •
edited
Loading

PR's are welcome 🙂 You can add gutterBreakPoints prop

@cedricdelpoux cedricdelpoux reopened this Aug 6, 2024
@cedricdelpoux cedricdelpoux changed the title responsive gutter Add responsive gutter Aug 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@cedricdelpoux @bell-steven @baranelitez @linobino1