equalColumnHeights question

[jhanley87]

Hi,

Hoping that I can get some help here. I am trying to use the equalColumnHeights for the grid component, however, when I add that attribute it takes away the span of the columns.

<Grid gutter="space30" vertical>
  <Column>
  <Grid gutter="space30">
    <Column span={6}>
      <Card >Hello</Card>
    </Column>
    <Column span={6}>
      <Card>Hello</Card>
    </Column>
  </Grid>
  </Column>
  <Column>
    <Card>Hello</Card>
  </Column>
</Grid>

to my mind, the above code should have 2 columns with a width of 6 and then a single column underneath which has the entire width which without the attribute it does:

when I add equalColumnHeights to the inner grid I get:

Is this expected behavior?

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Yes, this is the expected behavior. When you set equalColumnHeights on a grid container, all columns in a single row will share the height of the tallest column. However, it doesn't affect the width of the columns.

In your case, when you add equalColumnHeights to the inner grid, it's making the height of the columns equal, but it's not affecting the width.

If you want to control the width of the columns, you should use the span prop. The span prop defines how many columns you want the width of your content to take up out of a 12-column grid.

Here's an example of how you can use it:

<Grid gutter="space30" vertical>
  <Column>
  <Grid gutter="space30" equalColumnHeights>
    <Column span={6}>
      <Card >Hello</Card>
    </Column>
    <Column span={6}>
      <Card>Hello</Card>
    </Column>
  </Grid>
  </Column>
  <Column>
    <Card>Hello</Card>
  </Column>
</Grid>

In this example, the inner grid has equalColumnHeights set, and each column in the inner grid has a span of 6, so they each take up half the width of the grid. The outer grid has a single column that spans the entire width of the grid.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Unequal column widths for Grid component (updated: 08/25/2023, similarity score: 88%)
• Grid column span stops working upon 13th column (updated: 05/26/2023, similarity score: 88%)
• Guidance on vertical grid spacing (updated: 06/28/2022, similarity score: 87%)

[SiTaggart]

Hi @jhanley87

This is just an unfortunate limitation with the Flex box based grid component. We even call it out in the docs as the last sentence for that section:

When columns have equal heights, a single child element will stretch to the height of the column. You may still need to control the width of that child though.
https://paste.twilio.design/components/grid#equal-column-heights

It's never too much of a problem as the content of the card will most likely fill the width with the column, so this really doesn't come up too much.

Long term, we want to move to a CSS grid based Grid components, which might give us a little more control over the layout of the children placed in the column. Even that is a fine balance, though, because the column doesn't "own" the content placed in it, and we try to never affect the styling of consumer supplied content, as we just don't know what your intention is going to be.

Hopefully, the content added to your cards will fill up the column space enough for this to not be visible to users.