antd cards with same height in grid

Viewed 508

How to make cards in a grid with the same height using Ant Design of React version 3.x?

const cardInLine = (cards, key) => {
  return (<Row type="flex" gutter={16} key={key}>
    {cards.map(card=>{
      return <Col span={8} key={card.cardName} style={{paddingTop: '8px', paddingBottom: '8px'}}>
        <Card
          size="small"
          actions={[
            <Button className="btn" type="primary" icon="plus" key="keyforreact">
            Add
            </Button>
          ]}>
          <Meta
            title={card.cardName}
            description={card.cardDesc}
          />
        </Card>
      </Col>;
    })}
  </Row>);
}

cards = [{
    cardName: 'item1',
    cardTitle: 'item1',
    cardDesc: 'item1item1 item1item1 item1item1 item1item1 item1item1 item1item1 item1item1item1'
    },
    {
    cardName: 'item2',
    cardTitle: 'item2',
    cardDesc: 'item2'
}]

enter image description here

The expected result is as follows:

enter image description here

0 Answers
Related