ReactJS UI Ant Design Row and Col Component

Last Updated : 21 May, 2021

Ant Design Library has this component pre-built, and it is very easy to integrate as well. Row Component provides a way to represent a row in the grid system, and it is used to display data in the form of rows. Col Component provides a way to represent a Col in the grid system, and it is used to display data in the form of columns. We can use the following approach in ReactJS to use the Ant Design Row and Col Component.

Row Props:

align: It is used to vertical-align the content.
gutter: It is used to denote the spacing between the grids.
justify: It is used for the Horizontal arrangement for the content.
wrap: It is used to auto wrap the line.

Col Props:

flex: It is used to denote the flex layout style.
offset: It is used to denote the number of cells to offset Col from left.
order: It is used to raster the order.
pull: It is used to denote the number of cells that raster is moved towards the left.
push: It is used to denote the number of cells that raster is moved towards the right.
span: It is used to raster the number of cells to occupy.
xs: It is used to denote the number of columns to span on extra-small devices having resolution < 576 pixels.
sm: It is used to denote the number of columns to span on small devices having resolution ≥ 576 pixels.
md: It is used to denote the number of columns to span on medium devices having resolution ≥ 768 pixels.
lg: It is used to denote the number of columns to span on large devices having resolution ≥ 992 pixels.
xl: It is used to denote the number of columns to span on extra-large devices having resolution ≥ 1200 pixels.
xxl: It is used to denote the number of columns to span on extra-large devices having resolution ≥ 1600 pixels.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:
```
npx create-react-app foldername
```
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
```
cd foldername
```
Step 3: After creating the ReactJS application, Install the required module using the following command:
```
npm install antd
```

Project Structure: It will look like the following.

Project Structure

Row Component Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

import React from 'react'
import "antd/dist/antd.css"; 
import { Row } from 'antd'; 
  
export default function App() { 
  
  return ( 
    <div style={{ display: 'block', width: 700, padding: 30 }}> 
      <h4>ReactJS Ant-Design Row Component</h4> 
      <Row style={{backgroundColor: 'red',  
           width: '100%', height: 10}}></Row> 
      <Row style={{backgroundColor: 'yellow',  
           width: '100%', height: 10}}></Row> 
      <Row style={{backgroundColor: 'blue',  
           width: '100%', height: 10}}></Row> 
    </div> 
  ); 
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Column Component Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

import React from 'react'
import "antd/dist/antd.css"; 
import { Row, Col } from 'antd'; 
  
export default function App() { 
  
  return ( 
    <div style={{ display: 'block', 
                  width: 700, padding: 30 }}> 
      <h4>ReactJS Ant-Design Column Component</h4> 
      <Row> 
        <Col style={{ 
          backgroundColor: 'blue', 
        }}> 
          1st Column 
        </Col> 
        <Col style={{ 
          backgroundColor: 'orange', 
        }}> 
          2nd Column 
        </Col> 
        <Col style={{ 
          backgroundColor: 'pink', 
        }}> 
          3rd Column 
        </Col> 
      </Row> 
    </div> 
  ); 
}