Как добавить карты в сетку с дизайном муравьев, используя реагировать

Question

Что такое муравей дизайн? Система проектирования с ценностями природы и детерминированности для лучшего пользовательского опыта корпоративных приложений Подробнее >> https://ant.design/

Карту можно использовать для отображения содержимого, относящегося к одной теме. Контент может состоять из нескольких элементов разных типов и размеров. если вам нужно добавить карту в сетку, попробуйте это

Здесь я использую 3 Grid в строке (вы можете изменить по вашему требованию).

КОД:

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;

Выход: