Как сделать адаптивную сетку, используя Ant Design?

Question

• Я пытаюсь следовать этой документации , но я не могу сделать эту работу.
• Я хочу, чтобы ящики разбивались на один столбец для маленьких экранов, как следующие примеры.

Into

Нужно ли использовать css вместо стандартных компонентов

Answer 1

Используйте этот код:

import 'antd/dist/antd.css';
import { Row, Col } from 'antd';

  <Row>
    <Col xs={24} xl={8}>
      One of three columns
    </Col>
    <Col xs={24} xl={8}>
      One of three columns
    </Col>
    <Col xs={24} xl={8}>
      One of three columns
    </Col>
  </Row>

или:

  <div className="ant-row">
    <div className="ant-col ant-col-xs-24 ant-col-xl-8">
      One of three columns
    </div>
    <div className="ant-col ant-col-xs-24 ant-col-xl-8">
      One of three columns
    </div>
    <div className="ant-col ant-col-xs-24 ant-col-xl-8">
      One of three columns
    </div>
  </div>