React Suite Grid Offset

Last Updated : 23 Jul, 2025

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:

👁 Image

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.

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

npm start

Output:

👁 Image

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.

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