Try   HackMD

Grid System in ANT Design

  1. import
import {Row , Col} from 'antd';
  1. 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>
  1. 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>
  1. 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>
  1. 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>
  1. 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>
  1. 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>
  1. 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>
  1. flex
<Row> <Col flex="100px">100px</Col> <Col flex="auto">Fill Rest</Col> </Row>
  1. 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>