Grid vertical gutter

[PabloFNK]

I have been using the Grid component and I have seen that the Gutter only applies when it is on horizontal. I think the gutter should apply vertically when on vertical direction.

In the examples you are solving it adding internally a Box with margin-top or margin-bottom but I think having the gutter apply on both scenarios could be better.

[serifluous]

Hey @PabloFNK ! Thanks for the suggestion. Can you share an example/screenshot of what you're trying to achieve with vertical spacing in Grid?

For now, you could try using Stack, which will be a little easier than Box with margins. But we may also want to add vertical spacing to Grid based on the use cases we see.

[PabloFNK]

You can see the behaviour on the next GIF:

And this is how we are using Grid:

<Grid gutter="space30" vertical={[true, true, false]}>
    <Column span={7}>
        <Box marginBottom="space50">
            <MyFirstCard />
        </Box>
    </Column>
    <Column span={5}>
        <Box marginBottom="space50">
            <MySecondCard />
        </Box>
    </Column>
</Grid>
<Grid gutter="space30">
    <Column span={[12, 12, 7]}>
        <MyThirdCard />
    </Column>
</Grid>

So when we are horizontal the spacing is handled by gutter="space30" however this gutter doesn't apply on vertical and that's why we need to add <Box marginBottom="space50">. I think it should apply the gutter horizontally when horizontal and vertically when vertical.

[richbachman]

Hi @PabloFNK

Thanks for the example. We're aware of that issue and will create a ticket in our backlog so we can figure out the best way to accomplish this.

For now the Box workaround is a good solution. One minor adjustment to that is to use a responsive value for the marginBottom. Something like <Box marginBottom={['space50', 'space0', 'space0' ]}>. That way the marginBottom doesn't mess with any layout on sizes larger than mobile.

[SiTaggart]

Hey @PabloFNK, Just to let you know this issue has been addressed in Grid. https://paste.twilio.design/layout/grid#responsive-columns

Thanks