React Suite Grid Gutter

Last Updated : 11 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.

The gutter prop of the Grid component helps to denote the spacing of the grids. It takes a number as a value.

Syntax:

<Grid> 
    <Row gutter={}></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 and Row Component 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 the <Row> component and within it, we are adding span elements with content from1 to 3 and added some styling to the elements. In this example, we are passing different values to the gutter prop of the Row component.

App.js

import { Grid, Row } from "rsuite"; 
import "rsuite/dist/rsuite.min.css"; 
  
function App() { 
    const style = { 
        border: "2px solid lightgreen", 
        margin: "50px 5px", 
        padding: "1px 5px", 
    }; 
    const labeStyle = { 
        color: "red", 
        margin: "8px", 
    }; 
  
    return ( 
        <div className="App"> 
            <h4> React Suite Grid Gutter</h4> 
            <Grid> 
                <p style={labeStyle}>gutter=2</p> 
  
                <Row gutter={2}> 
                    <span style={style}> 1</span> 
                    <span style={style}> 2</span> 
                    <span style={style}> 3</span> 
                </Row> 
  
                <p style={labeStyle}>gutter=12</p> 
  
                <Row gutter={12}> 
                    <span style={style}> 1</span> 
                    <span style={style}> 2</span> 
                    <span style={style}> 3</span> 
                </Row> 
  
                <p style={labeStyle}>gutter=26</p> 
  
                <Row gutter={26}> 
                    <span style={style}> 1</span> 
                    <span style={style}> 2</span> 
                    <span style={style}> 3</span> 
                </Row> 
                  
                <p style={labeStyle}>gutter=50</p> 
  
                <Row gutter={50}> 
                    <span style={style}> 1</span> 
                    <span style={style}> 2</span> 
                    <span style={style}> 3</span> 
                </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: Go to http://localhost:3000/ in your browser to see the output.

Example 2: Within the <Grid> tag we are adding the <Row> component and to the gutter prop passing state num, the num state is created using react useState hook initialized with 1. To the span elements within the row tag, some styling is added.

A dropdown is created that takes certain values whenever any change is made in the drop-down an onChange function naming onHandleChange gets triggered that set the value of num and accordingly the value of the gutter prop changes.

App.js

import { useState } from "react"; 
import { Grid, Row } from "rsuite"; 
import "rsuite/dist/rsuite.min.css"; 
  
function App() { 
  
    const [num, setNum] = useState(1); 
    const onHandleChange = (e) => { 
        setNum(e.target.value); 
    }; 
    const style = { 
        margin: "5px", 
        padding: "1px 5px", 
        backgroundColor: "white", 
    }; 
    const labeStyle = { 
        margin: "8px", 
    }; 
    const divStyle = { 
        height: 50, 
        width: 300, 
        padding: 10, 
        border: "2px solid green", 
        backgroundColor: "green", 
    }; 
  
    return ( 
        <div className="App"> 
            <h4> React Suite Grid Gutter</h4> 
            <select 
                name="gutter"
                id="gutter"
                style={{ marginLeft: 20 }} 
                onChange={onHandleChange} 
            > 
                <option value="1">1</option> 
                <option value="6">6</option> 
                <option value="20">20</option> 
            </select> 
  
            <Grid> 
                <p style={labeStyle}> 
                    gutter=<b style={{ color: "red" }}> 
                                {"" + num} 
                            </b> 
                </p> 
  
                <div style={divStyle}> 
                    <Row gutter={num}> 
                        <span style={style}>  
                            1 
                        </span> 
                        <span style={style}>  
                            2 
                        </span> 
                        <span style={style}>  
                            3 
                        </span> 
                    </Row> 
                </div> 
            </Grid> 
        </div> 
    ); 
} 
export default App;