added grid gap prop to support adding any gaps to width/height. Fixes #822

[alexiz10]

trafficstars

Proposed solution

This PR fixes #822 .

If you have a grid that contains gaps between cells, the grid items will typically span over any gaps between the spanned cells. For example, if you have a grid that has cells 100px wide, with 3px gaps, an item that spans 1 cell should be 100px wide. If it spans 2 cells, it should be 203px wide (2 cells, 1 gap). The equation for this is as follows

width = (horizontalSpan * gridCellWidth) + (gridGap * (horizontalSpan - 1))

Tradeoffs

Users can optionally provide the gridGap prop if they choose. Without it, the default values are [0, 0] and the grid will work the same as before.

Testing Done

• Created a new storybook story testing to make sure it works as expected.
• Ran tests locally to make sure nothing else was broken.