React Suite Grid Responsive

Last Updated : 13 Jul, 2022

React Suite is a front-end library designed for the middle platform and back-end products. React Suite Grid component provides a grid layout that provides 24 grids, It helps in responsiveness.

For responsiveness we pass the following props to the Col Component:

xxl: It takes a number as a value. The number of columns one wish to occupy for Extra large devices Desktops (≥ 1400px)
xl: It takes a number as a value. The number of columns one wish to occupy for Extra large devices Desktops (≥ 1200px)
lg: It takes a number as a value. The number of columns one wish to occupy for Large devices Desktops (≥ 992px)
md: It takes a number as a value. The number of columns one wish to occupy for Medium devices Desktops (≥ 768px)
sm: It takes a number as a value. The number of columns one wish to occupy for Small devices Tablets (≥ 576px)
xs: It takes a number as a value. The number of columns one wish to occupy for Extra small devices Phones (< 576px)

Syntax:

<Grid>
    <Row>
        <Col xs={ } sm={ } md={ } 
             lg={ } xl={ } xxl={ }></Col>
    </Row>
</Grid>

Prerequisite:

Introduction and installation reactJS
React Suite Row Component

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t then install create-react-app globally by using the command npm -g create-react-app or can install locally by npm i create-react-app.

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3: Now install the dependency by using the following command:

npm install rsuite

Project Structure: It will look like this:

Example 1: We are importing the Grid, Row, and Col Components from "rsuite", and to apply the default styles of the components we are importing "rsuite/dist/rsuite.min.css".

We are adding the Grid Components, within it, we are adding Row with Col Components and passing different values to the xs, sm, and md.

App.js

import { Grid, Row, Col } from "rsuite";
import "rsuite/dist/rsuite.min.css";

function App() {
    const style = {
        border: "2px solid green",
        textAlign: "center",
    };
    return (
        <div className="App">
            <h4>React Suite Grid Responsive</h4>
            <Grid>
                <Row>
                    <Col xs={8} sm={12} 
                         md={3} style={style}>
                        1
                    </Col>
                    <Col xs={8} sm={12} 
                         md={3} style={style}>
                        2
                    </Col>
                    <Col xs={8} sm={12} 
                         md={3} style={style}>
                        3
                    </Col>
                </Row>
            </Grid>
        </div>
    );
}

export default App;

Step to Run Application: Run the application using the following command from the project's root directory.

npm start

Output:

Example 2: We are importing the Grid, Row, and Col Components from "rsuite", and to apply the default styles of the components we are importing "rsuite/dist/rsuite.min.css".

We are adding two Grid Components. Within it, we are adding Row with Col Components and passing different values to the xs, sm, md, and lg.

App.js

import { Grid, Row, Col } from "rsuite";
import "rsuite/dist/rsuite.min.css";

function App() {
    return (
        <div className="App">
            <h4>React Suite Grid Responsive</h4>
            <Grid>
                <Row>
                    <p>Row -1</p>
                    <Col
                        xs={24}
                        sm={12}
                        md={3}
                        lg={12}
                        style={{ backgroundColor: "#A0F962" }}
                    >
                        1
                    </Col>
                    <Col
                        xs={24}
                        sm={12}
                        md={3}
                        lg={4}
                        style={{ backgroundColor: "#D97BFC" }}
                    >
                        2
                    </Col>
                    <Col
                        xs={24}
                        sm={12}
                        md={3}
                        lg={4}
                        style={{ backgroundColor: "#96FEF2" }}
                    >
                        3
                    </Col>
                    <Col
                        xs={24}
                        sm={12}
                        md={3}
                        lg={4}
                        style={{ backgroundColor: "#FC7B96" }}
                    >
                        4
                    </Col>
                </Row>
                <Row>
                    <p>Row -2</p>
                    <Col
                        xs={24}
                        sm={6}
                        md={6}
                        lg={12}
                        style={{ backgroundColor: "#FEAF96" }}
                    >
                        1
                    </Col>
                    <Col
                        xs={24}
                        sm={6}
                        md={6}
                        lg={12}
                        style={{ backgroundColor: "#CAFF83" }}
                    >
                        2
                    </Col>
                    <Col
                        xs={24}
                        sm={6}
                        md={6}
                        lg={12}
                        style={{ backgroundColor: "#FEED96 " }}
                    >
                        3
                    </Col>
                    <Col
                        xs={24}
                        sm={6}
                        md={6}
                        lg={12}
                        style={{ backgroundColor: "#D6D8FF" }}
                    >
                        4
                    </Col>
                </Row>
            </Grid>
        </div>
    );
}

export default App;