Open In App

React Suite FlexboxGrid Layout

Last Updated : 27 Jun, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

React Suite is a front-end library designed for the middle platform and back-end products. React Suite FlexboxGrid component allows the user to use 24 grids as it is a grid layout component.

The justify prop defines the horizontal arrangement of the FlexboxGrid component. It can be either set to “center”, “start”, “end”, “space-around” or “space-between”.

Syntax:

<FlexboxGrid justify=""></FlexboxGrid>

Prerequisite:

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, install create-react-app globally using the command npm -g create-react-app or 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 FlexboxGrid Component from rsuite, and to apply the default styles of the components, we are importing “rsuite/dist/rsuite.min.css”. Within the FlexboxGrid component, we are adding FlexboxGrid.Item component with some numbers and adding some styles to it which we have defined in the style. To the FlexboxGrid Component, we have mentioned justifying prop to “start”, “center” and “end”, which shows the respective results.

App.js




import { FlexboxGrid } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  const style = {
    width: 30,
    display: "block",
    border: "2px solid green",
    textAlign: "center",
  };
  return (
    <div className="App">
      <h4> React Suite FlexboxGrid Layout </h4>
      <p style={{ textAlign: "center" }}>justify="start"</p>
  
      <FlexboxGrid justify="start">
        <FlexboxGrid.Item style={style}>1</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>2</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>3</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>4</FlexboxGrid.Item>
      </FlexboxGrid>
      <hr />
      <p style={{ textAlign: "center" }}>justify="end"</p>
  
      <FlexboxGrid justify="end">
        <FlexboxGrid.Item style={style}>1</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>2</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>3</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>4</FlexboxGrid.Item>
      </FlexboxGrid>
      <hr />
      <p style={{ textAlign: "center" }}>justify="center"</p>
  
      <FlexboxGrid justify="center">
        <FlexboxGrid.Item style={style}>1</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>2</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>3</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>4</FlexboxGrid.Item>
      </FlexboxGrid>
    </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 setting the justify prop to “space-between” and “space-around”.

App.js




import { FlexboxGrid } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  const style = {
    width: 30,
    display: "block",
    border: "2px solid green",
    textAlign: "center",
  };
  return (
    <div className="App">
      <h4> React Suite FlexboxGrid Layout </h4>
      <p style={{ textAlign: "center" }}>justify="space-around"</p>
  
      <FlexboxGrid justify="space-around">
        <FlexboxGrid.Item style={style}>1</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>2</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>3</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>4</FlexboxGrid.Item>
      </FlexboxGrid>
      <hr />
      <p style={{ textAlign: "center" }}>justify= space-between</p>
  
      <FlexboxGrid justify="space-between">
        <FlexboxGrid.Item style={style}>1</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>2</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>3</FlexboxGrid.Item>
        <FlexboxGrid.Item style={style}>4</FlexboxGrid.Item>
      </FlexboxGrid>
    </div>
  );
}
  
export default App;


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

npm start

Output:

 

Reference:- https://rsuitejs.com/components/flexbox-grid/#layout



Similar Reads

React Suite FlexboxGrid Component
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. FlexboxGrid component allows the user to use 24 grids as it is a grid layout component that is implemented via CSS Flexbox. We can use the following approach in ReactJS to use the React Suite FlexboxGrid Compone
3 min read
React Suite &lt;FlexboxGrid.Item&gt; Props
React Suite is a front-end library designed for the middle platform and back-end products. React Suite FlexboxGrid component allows the user to use 24 grids as it is a grid layout component. &lt;FlexboxGrid.Item&gt; component defines the items within a FlexboxGrid component. The props are: as: It denotes the element type of the component. It is 'di
3 min read
React Suite FlexboxGrid Order
React Suite is a front-end library designed for the middle platform and back-end products. React Suite FlexboxGrid component allows the user to use 24 grids as it is a grid layout component. The order prop sorts in ascending order the React Suite FlexGrid items according to the value passed to the prop. It takes a number as a parameter. Syntax:
3 min read
React Suite FlexboxGrid Alignment
React Suite is a front-end library designed for the middle platform and back-end products. React Suite FlexboxGrid component allows the user to use 24 grids as it is a grid layout component. The align prop defines the alignment of the FlexboxGrid component. It can be either set to "top", "middle", or "bottom". Syntax: &lt;FlexboxGrid align=""&gt;
4 min read
React Suite FlexboxGrid Responsive
React Suite is a front-end library designed for the middle platform and back-end products. React Suite FlexboxGrid component allows the user to use 24 grids as it is a grid layout component. The FlexboxGrid Responsive can be created by combining with the &lt;Col&gt; component. Note: We are passing Col as props value of FlexboxGrid.Item so that it d
4 min read
React Suite Checkbox Group With Horizontal Layout
React Suite is an open-source front-end library that comes with a set of React components built for enterprise products. It is a developer-friendly UI framework and supports the latest releases of all the major modern browsers. In this article, we will be seeing React Suite Checkbox Group With Horizontal Layout. The checkbox elements inside a check
3 min read
React Suite Container Basic Layout
React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we'll learn about React suite Container Basic Layout. The container layout can define the main fra
3 min read
React Suite Container Sidebar Layout
React Suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we'll learn about React Suite Container Sidebar Layout. The container layout can define the main f
4 min read
React Suite Container Login Page Layout
React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we'll learn about React suite Container Login Page Layout. The container layout can define the mai
3 min read
React Suite Container Navbar Layout
React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we'll learn about React suite Container Navbar Layout. The container layout can define the main fr
2 min read