search

jaredLunde / masonic

🧱 High-performance masonry layouts for React
https://codesandbox.io/s/0oyxozv75v
MIT License
797 stars 49 forks source link

Separate horizontal/vertical gutter sizes #95

Closed tobz1000 closed 3 years ago

tobz1000 commented 3 years ago

Is your feature request related to a problem? Please describe. We have a requirement for the gutters separating cells within a column to be of a different size to the gutters separating each column. Currently, the solution is to set gutter size to 0 and wrap each cell in an over-sized div with the desired additional transparent area.

Describe the solution you'd like An additional optional param for <Masonry> and usePositioner to separately specify the width of the spacing between cells in a column. It would make sense for this to be called rowGutter, as it is consistent with the parameter of the same name for <List>.

Describe alternatives you've considered As described above, adding transparent space to cells and setting gutters to 0 is another option for callers.

At first glance, this looks like a simple change, I'd be happy to potentially add a PR. Thanks for the overall great lib.

jaredLunde commented 3 years ago

I will accept a PR for this if it is accomplished without breaking changes. I for sure see the use case. The column prefix is meant to act as a categorization i.e. a configuration to the columns. I think my preferred api would keep the one prop, but accept an additional type for {x: number, y: number} or similar.

tobz1000 commented 3 years ago

I think my preferred api would keep the one prop, but accept an additional type for {x: number, y: number} or similar.

This was my initial thought for the API too; however, since the name rowGutter is already used as a param for List, it would feel more natural to use a param of the same name on grids as well, IMO, because this new param will effectively do the same thing. This also means we don't need any additional memoization for an {x, y} object param. It can be made non-breaking by ensuring that columnGutter is still used for vertical spacing when rowGutter is not provided.

tobz1000 commented 3 years ago

Thank you for the speedy response and PR merge!