Grid System in ANT Design

1. import

import {Row , Col} from 'antd';

2. basic grid
   The grid is divided into 24 part

• span -> how many parts of all 24 parts should this col use

<Row>
    <Col span={8}>Hello</Col>
    <Col span={8}>Hello</Col>
    <Col span={8}>Hello</Col>
</Row>

3. row gutter

• gutter -> is the space between rows

// <Row gutter={[vertical , horesizntal]}>
<Row gutter={[16 , 24]}>
    <Col span={24}>Hello</Col>
    <Col span={24}>Hello</Col>
</Row>

4. column offset

• offset -> how many parts of 24 parts should this Col leave empty before it

<Row gutter={16}>
    <Col span={12} offset={12}>Hello</Col>
</Row>

5. push and pull

• push and pull -> are used to order Columns
  Example

<Row>
    <Col span={6} push={12}>Secound in order</Col>
    <Col span={12} pull={6}>First in order</Col>
</Row>

6. Row justify

• justify Options
• start, center, end, space-between, space-around and space-evenly

<Row justify={'start'}>
    <Col span={3}>3</Col>
    <Col span={3}>3</Col>
    <Col span={3}>3</Col>
</Row>

6. Row align

• align Options
• top middle bottom

<Row justify={'start'} align={'top'}>
    <Col span={3}>3</Col>
</Row>
<Row justify={'start'} align={'middle'}>
    <Col span={3}>3</Col>
</Row>
<Row justify={'start'} align={'bottom'}>
    <Col span={3}>3</Col>
</Row>

7. order
   To change the element sort by order.

<Row>
    <Col span={6} order={4}>
        1 order-4
    </Col>
    <Col span={6} order={3}>
        2 order-3
    </Col>
    <Col span={6} order={2}>
        3 order-2
    </Col>
    <Col span={6} order={1}>
        4 order-1
    </Col>
</Row>

8. flex

<Row>
    <Col flex="100px">100px</Col>
    <Col flex="auto">Fill Rest</Col>
</Row>

9. responsive

// xs , sm , md ,lg , xl , xxl
<Row gutter={[16 , 32]} style={{ background: 'red' }}>
    <Col span={24} style={styles}><Typography.Title>Header</Typography.Title></Col>
    <Col md={12} xs={24} style={styles}>lorem</Col>
    <Col md={12} xs={24} style={styles}>side</Col>
</Row>

OR

<Row gutter={[16, 32]} style={{ background: 'red' }}>
    <Col span={24} style={styles}><Typography.Title>Header</Typography.Title></Col>
    <Col md={{ span: 12, offset: 1 }} xs={{ span: 24, offset: 0 }} style={styles}>lorem</Col>
    <Col md={{ span: 10, offset: 1 }} xs={{ span: 24, offset: 0 }} style={styles}>lorem</Col>
</Row>