How to add cards in grid with ant design using react js

What is ant design?
A design system with values of Nature and Determinacy for better user experience of enterprise applications Read More >> https://ant.design/

A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes. if you need to add card in grid system try this

Here I'm using 3 Grid in row (you can change on your requirement).

CODE:

import React from 'react';
import { Card, Icon, Avatar } from 'antd';
const { Meta } = Card;
import { Row, Col } from 'antd';

class Surveys extends React.Component{

render() {
return (
<Row gutter={16}>
<Col className="gutter-row" span={8}>
<Card
cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]}
>
<Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title="Card title"
description="This is the description"
/>
</Card>
</Col>

<Col className="gutter-row" span={8}>
<Card
cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]}
>
<Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title="Card title"
description="This is the description"
/>
</Card>
</Col>
<Col className="gutter-row" span={8}>
<Card
cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]}
>
<Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title="Card title"
description="This is the description"
/>
</Card>
</Col>
</Row>
);
}
}

export default Surveys;


Output:

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.