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 two available props of <Grid> are:
- as: It denotes the element type of the component. It is ‘div’ by default but one can custom the element for this component.
- fluid: It is a boolean value. It defines the layout as covering 100% of the width of the parent component. It is true by default,
Syntax:
<Grid> </Grid>
Prerequisite: Introduction and installation reactJS
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 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 span elements with naming ‘items’ from1 to 5 and added some styling to the elements. In this example, we will look into the as prop. To the as prop of the Grid component we are passing different element types like ‘h3’ and ‘button’.
App.js
import { Grid } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { const style = { border: "2px solid lightgreen", margin: "5px", padding: "1px 5px", }; return ( <div className="App"> <h4 style={{ textAlign: "center" }}> React Suite <Grid> Prop </h4> <div> <p style={{ textAlign: "center", marginBottom: "12px" }}> Grid as ='div' </p> <Grid> <span style={style}> item1</span> <span style={style}> item2</span> <span style={style}> item3</span> <span style={style}> item4</span> <span style={style}> item5</span> <span style={style}> item6</span> </Grid> <hr /> <p style={{ textAlign: "center", marginBottom: "12px" }}> Grid as ='h3' </p> <Grid as="h3"> <span style={style}> item1</span> <span style={style}> item2</span> <span style={style}> item3</span> <span style={style}> item4</span> <span style={style}> item5</span> <span style={style}> item6</span> </Grid> <hr /> <p style={{ textAlign: "center", marginBottom: "12px" }}> Grid as ='button' </p> <Grid as="button"> <span style={style}> item1</span> <span style={style}> item2</span> <span style={style}> item3</span> <span style={style}> item4</span> <span style={style}> item5</span> <span style={style}> item6</span> </Grid> </div> </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 looking into the fluid property of the Grid component. In one Grid component, we are not passing the fluid prop and in another, we are passing it.
App.js
import { Grid } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { const style = { border: "2px solid lightgreen", margin: "5px", padding: "1px 5px", }; return ( <div className="App"> <h4> React Suite <Grid> Prop</h4> <div style={{ border: "4px solid green", width: "16%" }}> <p style={{ textAlign: "center", marginBottom: "12px" }}> Without Using fluid </p> <Grid> <span style={style}> item1</span> <span style={style}> item2</span> <span style={style}> item3</span> <span style={style}> item4</span> <span style={style}> item5</span> <span style={style}> item6</span> </Grid> <hr /> <p style={{ textAlign: "center", marginBottom: "12px" }}> Using fluid </p> <Grid fluid> <span style={style}> item1</span> <span style={style}> item2</span> <span style={style}> item3</span> <span style={style}> item4</span> <span style={style}> item5</span> <span style={style}> item6</span> </Grid> </div> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
We can see that the contents of the Grid component at the top are coming out of the green border but the contents of the second Grid component is wrapped within the borders of the div.
Reference: https://rsuitejs.com/components/grid/#code-lt-grid-gt-code
