GridLayout's minSpace option has an unexpected/ambiguous behavior

[GustavoHenriqueP]

Provide a general summary of the issue here

In Virtualizer's docs, the GridLayout.minSpace option is described as "The minimum space required between items.".

Due to the use of the word between, also used in the description of the ListLayout.gap option, I believe it is understood that this option would function like a CSS's grid layout (minimum) gap. But what happens is that this space is distributed between the inner and outer margins of the grid.

🤔 Expected Behavior?

The GridLayout.minSpace option apply only inner gaps between the grid items.

😯 Current Behavior

The GridLayout.minSpace option is distributing its Size between inner and outer gaps.

💁 Possible Solution

I don't know if this behavior was intentional, but would be really helpful to allow an option to apply only inner gaps on the grid, mimicking the CSS grid layout behavior.

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/devbox/58q8x8?migrateFrom=9mk59p

Version

RAC 1.16.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows 11

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

Adding a margin option to control the external margin and keeping minSpace as the inter-card spacing seems reasonable to me, we actually had margin separately defined in an older implementation, not sure why we ended up dropping that.

[LFDanLu]

It turns out that this is a bit more complicated that anticipated due to how the math currently works which is more like space-around so adding a margin (or more like padding) would simply add additional spacing on top of the calculated gap. If we were to treat minSpace as space-between instead and use padding to determine the grid item edge to container spacing, this would be a change in overall behavior even if padding wasn't provided. That being said, we wouldn't be opposed to adding additional options to specify all of this behavior more precisely, so if you'd like to give this a shot feel free!

[GustavoHenriqueP]

Got it! I'll give a shot on it in the next few days.

Thanks for the fast response!

[GustavoHenriqueP]

Hello @LFDanLu .

I figured that the behavior is more like a space-evenly, which tries to distribute the spacing in a symmetrically way, even sometimes it means not respecting minSpace values (which maybe is a bug?).

I got to fix this behavior and always respect the minSpace, and got to get a space-between behavior. But I'm wondering how we could implement these changes. Should I create another issue describing this problem of not respecting minSpace, and then create another issue (or even an RFC) describing improvements we could implement in the API, such as a justify prop, which would alter the spacing algorithm's behavior?

[LFDanLu]

A new issue/RFC is definitely welcome so we can discuss the specifics around the API and/or any complexity that you've discovered here.