React Suite Grid Offset

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 offset, we pass the following props to the Col Component:

• xxlOffset: It takes a number as a value. It moves the columns to the right for Extra large devices Desktops
• xlOffset: It takes a number as a value. It moves the columns to the right for Extra large devices Desktops
• lgOffset: It takes a number as a value. It moves the columns to the right for Large devices Desktops
• mdOffset: It takes a number as a value. It moves the columns to the right for Medium devices Desktops
• smOffset: It takes a number as a value. It moves the columns to the right for Small devices Tablets
• xsOffset: It takes a number as a value. It moves the columns to the right for Extra small devices Phones

Syntax:

<Grid>
    <Row>
        <Col xsOffset={} smOffset={} 
             mdOffset={} lgOffset={}>
        </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 xsOffset, smOffset, and mdOffset.

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 mdOffset={20} smOffset={12}
                    style={style}>
                        1
                    </Col>
                    <Col mdOffset={20} smOffset={6}
                    style={style}>
                        2
                    </Col>
                    <Col mdOffset={20} smOffset={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 xsOffset, smOffset, mdOffset, and lgOffset.

App.js

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

function App() {
    return (
        <div className="App">
            <h4>React Suite Grid Offset</h4>
            <Grid>
                <Row>
                    <h6 style={{ textAlign: "center" }}>
                        Row -1</h6>
                    <Col
                        xsOffset={24}
                        smOffset={12}
                        mdOffset={3}
                        lgOffset={12}
                        style={{ backgroundColor: "#A0F962",
                                 width: 100 }}
                    >
                        1
                    </Col>
                    <Col
                        xsOffset={24}
                        smOffset={12}
                        mdOffset={3}
                        lgOffset={4}
                        style={{ backgroundColor: "#D97BFC",
                                 width: 100 }}
                    >
                        2
                    </Col>
                    <Col
                        xsOffset={24}
                        smOffset={12}
                        mdOffset={3}
                        lgOffset={4}
                        style={{ backgroundColor: "#96FEF2",
                                 width: 100 }}
                    >
                        3
                    </Col>
                    <Col
                        xsOffset={24}
                        smOffset={12}
                        mdOffset={3}
                        lgOffset={4}
                        style={{ backgroundColor: "#FC7B96",
                                 width: 100 }}
                    >
                        4
                    </Col>
                </Row>
                <Row>
                    <h6 style={{ textAlign: "center" }}>
                        Row -2</h6>
                    <Col
                        xsOffset={24}
                        smOffset={6}
                        mdOffset={6}
                        lgOffset={12}
                        style={{ backgroundColor: "#FEAF96",
                                 width: 100 }}
                    >
                        1
                    </Col>
                    <Col
                        xsOffset={24}
                        smOffset={6}
                        mdOffset={6}
                        lgOffset={12}
                        style={{ backgroundColor: "#CAFF83",
                                 width: 100 }}
                    >
                        2
                    </Col>
                    <Col
                        xsOffset={24}
                        smOffset={6}
                        mdOffset={6}
                        lgOffset={12}
                        style={{ backgroundColor: "#FEED96 ",
                                 width: 100 }}
                    >
                        3
                    </Col>
                    <Col
                        xsOffset={24}
                        smOffset={6}
                        mdOffset={6}
                        lgOffset={12}
                        style={{ backgroundColor: "#D6D8FF",
                                 width: 100 }}
                    >
                        4
                    </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:

Reference: https://rsuitejs.com/components/grid/#offset