React Suite Grid Responsive

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 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:

👁 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 xs, sm, and md.

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 xs, sm, md, and lg.

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