React Suite Grid Push and Pull

Last Updated : 03 Jul, 2022

A React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React suite Grid Push and Pull. The grid push and pull are used to change the order of grid columns to the left or the right for Large screen devices.

Grid Props:

as: It is used for adding a custom element type for this component.
fluid: It is used for the fluid layout.

Row Props:

as: It is used for adding a custom element type for this component.
gutter: It denotes the spacing of the grids.

Col Props:

as: It is used for adding a custom element type for this component.
xxl: It is used to denote the number of columns you wish to span for Large devices Desktops having screen size ≥ 1400 pixels.
xxlHidden: It is used to hide the columns on Large devices Desktops.
xxlOffset: It is used to move columns to the right for Medium devices Desktops.
xxlPull: It is used to change the order of grid columns to the left for Large devices Desktops.
xxlPush: It is used to change the order of grid columns to the right for Large devices Desktops.
xl: It is used to denote the number of columns you wish to span for Large devices Desktops having screen size ≥ 1200 pixels.
xlHidden: It is used to hide the columns on Large devices Desktops.
xlOffset: It is used to move columns to the right for Medium devices Desktops.
xlPull: It is used to change the order of grid columns to the left for Large devices Desktops.
xlPush: It is used to change the order of grid columns to the right for Large devices Desktops.
lg: It is used to denote the number of columns you wish to span for Large devices Desktops having screen size ≥ 992 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 ≥ 768 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 ≥ 576 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 < 576 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

Syntax:

<Grid>
    <Row className="show-grid">
      <Col xs={12} xsPush={12}>
          ...
      </Col>
      <Col xs={12} xsPull={12}>
          ...
      </Col>
    </Row>
</Grid>

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Example 1: Below example demonstrate the basic grid with push and pull.

Javascript

import "rsuite/dist/rsuite.min.css"; 
import { Grid, Row, Col } from "rsuite/"; 
  
export default function App() { 
    return ( 
        <center> 
            <div> 
                <h2>GeeksforGeeks</h2> 
                <h4 style={{ color: "green" }}> 
                    React Suite Grid Push and Pull</h4> 
  
                <div style={{ margin: 20, }}> 
                    <Grid fluid> 
                        <Row className="show-grid"> 
                            <Col xs={10} xsPush={10}  
                                style={{ backgroundColor: 'lightgreen' }}> 
                                xs=10 and xsPush=10 `Left` 
                            </Col> 
                            <Col xs={10} xsPull={10}  
                                style={{ backgroundColor: 'lightblue' }}> 
                                xs=10 and xsPull=10 `Right` 
                            </Col> 
                        </Row> 
                    </Grid> 
                </div> 
            </div> 
        </center> 
    ); 
} 

Output:

Example 2: Below example demonstrate the responsive grid with push and pull.

Javascript

import "rsuite/dist/rsuite.min.css"; 
import { Grid, Row, Col } from "rsuite/"; 
  
export default function App() { 
    return ( 
        <center> 
            <div> 
                <h2>GeeksforGeeks</h2> 
                <h4 style={{ color: "green" }}> 
                    React Suite Grid Push and Pull</h4> 
  
                <div style={{ margin: 20, }}> 
                    <Grid fluid> 
                        <Row className="show-grid"> 
                            <Col xs={6} sm={12} xsPush={12}  
                                style={{ backgroundColor: 'orange' }}> 
                                Responsive xs=6 sm=12 and xsPush=12 `Left` 
                            </Col> 
                            <Col sm={6} md={12} xsPull={12}  
                                style={{ backgroundColor: 'red', color: 'white' }}> 
                                Responsive sm=6 md=12 and xsPull=12 `Right` 
                            </Col> 
                        </Row> 
                    </Grid> 
                </div> 
            </div> 
        </center> 
    ); 
}