In this article, we'll look at how to use it to add components to our React app.

Column Gutter and Spacing

We can add a gutter to the column with the gutter prop:

import React from "react";
import { Grid, Row, Col } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";
export default function App() {
  return (
    <div className="App">
      <Grid fluid>
        <Row gutter={16}>
          <Col xs={2}>xs={2}</Col>
          <Col xs={2}>xs={2}</Col>
          <Col xs={2}>xs={2}</Col>
        </Row>
      </Grid>
    </div>
  );
}

The unit is in pixels.

We can set the number of columns to offset with xsOffset :

import React from "react";
import { Grid, Row, Col } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";
export default function App() {
  return (
    <div className="App">
      <Grid fluid>
        <Row gutter={16}>
          <Col xs={2}>xs={2}</Col>
          <Col xs={2}>xs={2}</Col>
          <Col xs={2} xsOffset={16}>
            xs={2}
          </Col>
        </Row>
      </Grid>
    </div>
  );
}

mdOffset , smOffset , lgOffset lets us set offsets for the other breakpoints.

We can push and pull columns with the xsPush and xsPull props:

import React from "react";
import { Grid, Row, Col } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";
export default function App() {
  return (
    <div className="App">
      <Grid fluid>
        <Row gutter={16}>
          <Col xs={6} xsPush={6}>
            xs=6
          </Col>
          <Col xs={6} xsPull={6}>
            xs=6
          </Col>
        </Row>
      </Grid>
    </div>
  );
}

We can replace xs with the other breakpoints to set push and pull for the other breakpoints.

We can hide columns by breakpoints.

For example, we can write:

import React from "react";
import { Grid, Row, Col } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";
export default function App() {
  return (
    <div className="App">
      <Grid fluid>
        <Row>
          <Col md={6} xsHidden>
            md=6
          </Col>
          <Col xs={6}>xs=6</Col>
        </Row>
      </Grid>
    </div>
  );
}

xsHidden hides the column with the xs breakpoint is hit.

We can replace xs with the other breakpoints to hide it.

FlexboxGrid

We can add a flexbox layout with the FlexboxGrid component.

The grid is divided into 24 columns.

For instance, we can write:

import React from "react";
import { FlexboxGrid } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";
export default function App() {
  return (
    <div className="App">
      <FlexboxGrid>
        <FlexboxGrid.Item colspan={6}>colspan={6}</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={6}>colspan={6}</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={6}>colspan={6}</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={6}>colspan={6}</FlexboxGrid.Item>
      </FlexboxGrid>
    </div>
  );
}

to add FlexboxGrid.Item components to add columns.

colspan lets us set the number of columns.

We can set how the items are laid out with the justify prop:

import React from "react";
import { FlexboxGrid } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";
export default function App() {
  return (
    <div className="App">
      <FlexboxGrid justify="center">
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
      </FlexboxGrid>
    </div>
  );
}

We can use other justify-content values with justify .

Also, we can set the align prop:

import React from "react";
import { FlexboxGrid } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";
export default function App() {
  return (
    <div className="App">
      <FlexboxGrid align="middle" style={{ height: 300 }}>
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
      </FlexboxGrid>
    </div>
  );
}

Any align-items value can be set as the value of the align prop.

Conclusion

We can space column spacing and add flexbox containers into our React app with React Suite.