Ant-design: Equal height items

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

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:

I see ... It looks reasonable.

Maybe call vertical-fill better ?

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

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

Any resolution on this issue?

nope

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

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.

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?

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;
}

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

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>

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.