Equal height items

[studioraygun]

What problem does this feature solve?

When using the Card component it would be great to add support for equal heights. Similarly, when using Row and Col, if we could add support for equal heights on all children of a Row item, it would solve a lot of layout issues.

What does the proposed API look like?

<Row equal-heights> or similar

[yutingzhao1991]

I don't understand，What does a lot of layout issues mean?

Row height === max(Col height) so it will not bring layout issues. https://codesandbox.io/s/my8p6vk7wj

[studioraygun]

I mean add a feature to make the columns (and other elements) equal heights inside a row.

Your example currently looks like this:

But it would be nice to add <Row equal-heights> and the content appear as so:

[yutingzhao1991]

I see ... It looks reasonable.

Maybe call vertical-fill better ?

[afc163]

I don't think we need this, the height of children should leave to children's content or it's style.

[birendra-90]

@yutingzhao1991 @ddcat1115 I am getting the same issues. Any have a solution for that?

[sgwcollins]

Any resolution on this issue?

[birendra-90]

nope

[alvin]

Using flexbox-enabled rows with type="flex" and setting the height to 100% on the column contents worked well for me.

<Row gutter={16} type="flex">

https://ant.design/components/grid/#Row

[youlinaXealth]

Thanks Alvin. It works for me to set type='flux'. But don't forget to set the height to 100% on the column contents also. Not column itself, it should be the component under column.

[rsrogers4]

I have Cards in my grid. Setting row type to "flux" and the card's height to "100%" (as suggested in this thread) works perfectly in the sense that each card fills the full height of the row. However, the card's action bar is no longer at the bottom of the row. It looks like this:

How can I have cards in a grid that expand to the height of the row, and with the card action buttons at the bottom of the row?

[dianaabv]

in the Meta tag you can add a class and specify your fixed height. Like

<Card>
 <Meta  
  className="cardBodyStyle"
  title={key.title}
  description={key.description}
 />
</Card>

css:

.cardBodyStyle {
    height: 100px;
}

[milad1367]

Using flexbox-enabled rows with type="flex" and setting the height to 100% on the column contents worked well for me.

<Row gutter={16} type="flex">

https://ant.design/components/grid/#Row

this is the right way

[pavloneiman]

Try this approach to stretch child node to all available space (vertically and horizontally)

<Row gutter={16}>
    <Col span={12} style={{display: 'flex'}}>
        <Card style={{flex:1}}>
            1<br/>2<br/>3
        </Card>
    </Col>
    <Col span={12} style={{display: 'flex'}}>
        <Card style={{flex:1}}>
            1<br/>2
        </Card>
    </Col>
</Row>

[cromat]

For me, none of these were working. The solution was to remove height: 100% and set display: inline-flex and align-self: stretch on Col tags. If you have multiple elements inside Col, you'll need to wrap them within another container so that the Col has only one child.

[Knive]

If someone is interested in the case you are using a Card component inside a Col as @studioraygun intended and you have the same issue as @rsrogers4, here is how you get equal heights body cards:

TLDR :

• Set display: flex on Col and inner Card components
• Add flex-direction: column on inner Card component
• Set flex-grow: 1 on .ant-card-body

Example :

<Row gutter={16}>

    <Col style={{ display: 'flex' }}>
        <Card
            className='flexible-card'
            style={{ display: 'flex', flexDirection: 'column' }}
            actions={[
                <SettingOutlined key="setting" />,
                <EditOutlined key="edit" />,
                <EllipsisOutlined key="ellipsis" />,
            ]}
        >
            <Meta title="Card title" description="This is the description"/>
        </Card>
    </Col>
    
    <Col style={{ display: 'flex' }}>
        <Card
            className='flexible-card'
            style={{ display: 'flex', flexDirection: 'column' }}
            actions={[
                <SettingOutlined key="setting" />,
                <EditOutlined key="edit" />,
                <EllipsisOutlined key="ellipsis" />,
            ]}
        >
             <Meta title="Card title" description="This is an even longer description to show the card body growing"/>
        </Card>
    </Col>
    
</Row>

And have written in your css :

.flexible-card .ant-card-body {
    flex-grow: 1
}

Instead of this:

You will get this:

[yarinsa]

If someone is interested in the case you are using a Card component inside a Col as @studioraygun intended and you have the same issue as @rsrogers4, here is how you get equal heights body cards:

TLDR :

• Set display: flex on Col and inner Card components
• Add flex-direction: column on inner Card component
• Set flex-grow: 1 on .ant-card-body

Example :

<Row gutter={16}>

    <Col style={{ display: 'flex' }}>
        <Card
            className='flexible-card'
            style={{ display: 'flex', flexDirection: 'column' }}
            actions={[
                <SettingOutlined key="setting" />,
                <EditOutlined key="edit" />,
                <EllipsisOutlined key="ellipsis" />,
            ]}
        >
            <Meta title="Card title" description="This is the description"/>
        </Card>
    </Col>
    
    <Col style={{ display: 'flex' }}>
        <Card
            className='flexible-card'
            style={{ display: 'flex', flexDirection: 'column' }}
            actions={[
                <SettingOutlined key="setting" />,
                <EditOutlined key="edit" />,
                <EllipsisOutlined key="ellipsis" />,
            ]}
        >
             <Meta title="Card title" description="This is an even longer description to show the card body growing"/>
        </Card>
    </Col>
    
</Row>

And have written in your css :

.flexible-card .ant-card-body {
    flex-grow: 1
}

Instead of this:

You will get this:

You helped me a lot thanks!!

[brhanegiday]

For me, none of these were working. The solution was to remove height: 100% and set display: inline-flex and align-self: stretch on Col tags. If you have multiple elements inside Col, you'll need to wrap them within another container so that the Col has only one child.

This has worked for me. Also make sure that the child of Col have width:100% so that it can span fully.
Thank you