Grid not working as expected

[oliverdolgener]

First of all thank you so much for this awesome library. We're starting to use it in our production app and we're already loving it.

We notice some unexpected behaviour while playing around with the Grid component.

• Unfortunately it does not use the same multiplied values as all the other components so you have to pass in the 'real' values.

• Another thing is that the margin prop only adds to the right edge. The left edge is using the gutter value.

• It would also be very useful to provide multiple values for all three breakpoints (e.g 4 columns on mobile, 8 on tablet, 12 on desktop as well as margins and gutters)

That makes it a bit hard to work with. Maybe you could have a look.

We use it like that:

<StacksProvider spacing={4} breakpoints={{ tablet: 600, desktop: 940 }}>
  {... Navigators & Stuff}
  <Grid columns={4} gutter={8} margin={16} />
</StacksProvider>

As you can see it applies 16px of margin to the right side but uses 8px of gutter for the left side. We were expecting margin to be applied to both sides.

Thanks in advance!

[mobily]

@oliverdolgener hey! thanks for reporting this issue :) to be honest, after rewriting to ReScript I didn't check if the Grid component works fine 🙈

[mobily]

@oliverdolgener 👋 Grid calculations have been fixed in v1.3.1, now it accepts the ResponsiveProp format and multiplied values (instead of "real" ones) 😊 see the screenshot below, I'm using the same values as you provided in the original post: <Grid columns={4} gutter={8} margin={16} /> (edit: it's of course: <Grid columns={4} gutter={2} margin={4} />)