Guidance on vertical grid spacing

[arodriguezcortes]

Hi team.

I'm displaying some read-only fields in a form and I would like to use a grid to display them in two columns and six rows. I'm using a combination of grids as suggested in the Grid component documentation, but for some reason it's not rendering the vertical spacing as expected (see image below, there's no space between rows).

I'm using this code (labels and inputs removed to make it short):

        <Box marginBottom="space80">
          <Grid gutter="space80" vertical>
            <Column>
              <Grid gutter="space40">
                <Column>
                  ...
                </Column>
                <Column>
                  ...
                </Column>
              </Grid>
            </Column>
            <Column>
              <Grid gutter="space40">
                <Column>
                  ...
                </Column>
                <Column>
                  ...
                </Column>
              </Grid>
            </Column>
            <Column>
              <Grid gutter="space40">
                <Column>
                  ...
                </Column>
                <Column>
                  ...
                </Column>
              </Grid>
            </Column>
          </Grid>
        </Box>

I don't know if I'm doing something wrong or I'm missing something. Any advice would be much appreciated.
Thanks in advance.

[andioneto]

@arodriguezcortes Hi there 👋

Which version of paste are you using? I just spun up this codesandbox and cannot reproduce this issue.

I suspect that this is happening because you are using an older version of @twilio-paste/core (or the grid package specifically), since we resolved this very issue a few months ago.

Please try updating your version, and if you still experience the issue, provide us with reproduction steps, including the package versions. Thank you! 💯

[arodriguezcortes]

Hi @andipants12 . Thanks for your response. I'm working in the new Twilio console and they are using @twilio-paste/core 10.6.0. However, I'm not in the core development team but in an application one, so I'm not sure if I can just update that package to the latest version. I'll talk with the console team tomorrow during office hours and let you know.

[arodriguezcortes]

Hi @andipants12. Just want to give an update on the answer from the console team. I'll make a PR to update the twilio-paste/core library and get this fix. Thanks for help.