How to make a responsive grid, using Ant Design?

• I try to follow this documentation, but i can't make this work.
• I want to make the boxes break into one column for small screens, just like the follow examples.

Into

Do i have to use css insted of default components?

Solution 1:

Use this code:

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>

or:

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

Solution 2:

Scroll down to the last section of the Grid documentation you've posted:

<div nz-row>
  <div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10">Col</div>
  <div nz-col nzXs="20" nzSm="16" nzMd="12" nzLg="8" nzXl="4">Col</div>
  <div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10">Col</div>
</div>

Having in mind that the ant row can contain 24 cols and you mentioning Bootstrap in your post (this is regarding sizing: xs, sm, md, etc) - I believe you can adjust everything else.