React Suite Grid Nesting

Last Updated : 18 Jul, 2022

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

Syntax:

<Grid>
    <Row>
        <Col> ... </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”.

Within the Grid tag, we are adding another Grid tag, we are adding span elements, and added some styling to the elements. And again added another Grid tag, we added span elements to it.

App.js

import { Grid } from "rsuite"; 
import "rsuite/dist/rsuite.min.css"; 
  
function App() { 
    return ( 
        <div className="App"> 
            <h4>React Suite Grid Nesting</h4> 
            <Grid style={{ 
                backgroundColor: "green", 
                padding: 20 
            }}> 
                <Grid style={{ 
                    backgroundColor: "violet", 
                    padding: 10 
                }}> 
                    <span style={{ 
                        backgroundColor: "yellow", 
                        padding: 10 
                    }}>1</span> 
                    <span style={{ 
                        backgroundColor: "skyblue", 
                        padding: 10 
                    }}>2</span> 
                </Grid> 
                <Grid style={{ 
                    backgroundColor: "blueviolet", 
                    padding: 10 
                }}> 
                    <span style={{ 
                        backgroundColor: "lightgreen", 
                        padding: 10 
                    }}>3</span> 
                    <span style={{ 
                        backgroundColor: "orange", 
                        padding: 10 
                    }}>4</span> 
                </Grid> 
            </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: In this example, we are forming a simple pattern using nesting.

App.js

import { Grid, Row, Col } from "rsuite"; 
import "rsuite/dist/rsuite.min.css"; 
  
function App() { 
    return ( 
        <div className="App"> 
            <h4>React Suite Grid Nesting</h4> 
            <Grid style={{ 
                backgroundColor: "green", 
                padding: 20, width: 100 
            }}> 
                <Row style={{ 
                    backgroundColor: "red", 
                    padding: 10 
                }}> 
                    <Row style={{ 
                        backgroundColor: "black", 
                        padding: 10 
                    }}> 
                        <Row style={{ 
                            backgroundColor: "white", 
                            padding: 10 
                        }}> 
                            <Row style={{ 
                                backgroundColor: "yellow", 
                                padding: 10 
                            }}> 
                                <Col style={{ 
                                    backgroundColor: "violet", 
                                    padding: 10 
                                }}></Col> 
                            </Row> 
                        </Row> 
                    </Row> 
                </Row> 
            </Grid> 
        </div> 
    ); 
} 
  
export default App;