React Suite Grid Component

Last Updated : 11 Apr, 2022

React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Grid component allows the user to provide 24 grids. It helps in achieving response design. We can use the following approach in ReactJS to use the React Suite Grid Component.

Grid Props:

componentClass: It can be used for the custom element type for this component.
fluid: It is used for the fluid layout.

Row Props:

componentClass: It can be used for the custom element type for this component.
gutter: It is used to denote the spacing of the grids.

Col Props:

componentClass: It can be used for the custom element type for this component.
lg: It is used to denote the number of columns you wish to span for Large devices Desktops having screen size ≥ 1200 pixels.
lgHidden: It is used to hide the columns on Large devices Desktops.
lgOffset: It is used to move columns to the right for Medium devices Desktops.
lgPull: It is used to change the order of grid columns to the left for Large devices Desktops.
lgPush: It is used to change the order of grid columns to the right for Large devices Desktops.
md: It is used to denote the number of columns you wish to span for Medium devices Desktops having screen size ≥ 992 pixels.
mdHidden: It is used to hide the columns on Medium devices Desktops.
mdOffset: It is used to move columns to the right for Medium devices Desktops.
mdPull: It is used to change the order of grid columns to the left for Medium devices Desktops.
mdPush: It is used to change the order of grid columns to the right for Medium devices Desktops.
sm: It is used to denote the number of columns you wish to span for Small devices Tablets having a screen size ≥ 480 pixels.
smHidden: It is used to hide the column on Small devices Tablets.
smOffset: It is used to move columns to the right for Small devices Tablets.
smPull: It is used to change the order of grid columns to the left for Small devices Tablets.
smPush: It is used to change the order of grid columns to the right for Small devices Tablets.
xs: It is used to denote the number of columns you wish to span for Extra small devices Phones having a screen size < 480 pixels.
xsHidden: It is used to hide the column on Extra small devices Phones.
xsOffset: It is used to move the columns to the right for Extra small devices Phones.
xsPull: It is used to change the order of grid columns to the left for Extra small devices Phones.
xsPush: It is used to change the order of grid columns to the right for Extra small devices Phones.

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

Project Structure: It will look like the following.

Project Structure

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 'rsuite/dist/styles/rsuite-default.css'; 
import { Grid, Row, Col } from 'rsuite'; 
  
export default function App() { 
  
  return ( 
    <div style={{ 
      display: 'block', width: 600, paddingLeft: 30 
    }}> 
      <h4>React Suite Grid Component</h4> <br></br> 
      <Grid fluid> 
        <Row className="show-grid"> 
          <Col style={{backgroundColor:'lightblue'}}  
               xs={12}>Size xs = 12 
          </Col> 
          <Col style={{backgroundColor:'lightgrey'}}  
               xs={12}>Size xs = 12  
          </Col> 
        </Row> 
        <br></br> 
        <Row className="show-grid"> 
          <Col style={{backgroundColor:'lightgreen'}}  
               xs={8}>Size xs = 8 
          </Col> 
          <Col style={{backgroundColor:'lightblue'}}  
               xs={8}>Size xs = 8 
          </Col> 
          <Col style={{backgroundColor:'lightgreen'}} 
               xs={8}>Size xs = 8 
          </Col> 
        </Row> 
      </Grid> 
    </div> 
  ); 
}