The `grid` prop doesn't account for grid gaps

[alexiz10]

trafficstars

This can be considered both a bug and a feature request.

Overview of the problem

I'm using re-resizable version [6.9.17]

My browser is:
Firefox, Chrome, Safari

I am sure this issue is not a duplicate?

Description

Basically, I was given a design for a grid that will contains draggable/resizable items. The design for the grid contains these grid cells in the background to which the resizable/draggable item will snap to. Here is a screenshot from the Figma design:

As you can see from the screenshot, the items will span hSpan * (gridCellWidth + gridGap) - gridGap, So the width of the item will always be one gridGap less than the gridCellWidth amount. Now, since I still need the items to resize by gridCellWidth + gridGap to account for the gaps, I provided the grid prop with

grid={[gridCellWidth + gridGap, gridCellHeight + gridGap]}

this works fine, as it actually resizes by the correct amount. But, at the start of the resize action, since the width of the item doesn't include that last gap, it will immediately snap 3px horizontally and 3px vertically. Then, the grid calculations go from there, so it is always off by 3px. When the resizing ends, I can just adjust the actual size, but this causes a UI bug for the users that doesn't look great.

Steps to Reproduce

1. Create a Resizable component
2. Give it grid values that include a grid gap ([gridCellWidth + gridGap, gridCellHeight + gridGap])
3. Set the initial width of the Resizable to something like 2 * (gridCellWidth + gridGap) - gridGap
4. Try to resize and see how the resizable will jump to accommodate the extra gap and it will now resize based on that point.

https://playcode.io/1916463

Feature request

I think a good feature would be to add an optional prop that would allow you to pass in a grid gap. If this is set, then the resizable would handle the gap accordingly.