Sometimes, we want to add a grid layout to a React Material UI app.

In this article, we’ll look at how to add a grid layout to a React Material UI app.

How to add a grid layout to a React Material UI app?

To add a grid layout to a React Material UI app, we can use the react-pure-grid library.

To install it, we wrun:

npm install react-pure-grid --save

Then we use it by writing:

import React from "react";
import { Container, Row, Col } from "react-pure-grid";

export default function App() {
  return (
    <Container>
      <Row>
        <Col xs={6} md={4} lg={3}>
          Hello world
        </Col>
      </Row>
      <Row>
        <Col xsOffset={5} xs={7}>
          Welcome
        </Col>
      </Row>
    </Container>
  );
}

Container is the grid container.

And we add Rows and Cols to add rows and columns respectively.

We set the width of the column given the breakpoint with xs, md, and lg, which stand for extra small, medium, and large respectively.

We can also add offsets for a given breakpoint.

For instance, we have xsOffset to add the number of columns to shift the column when the xs breakpoint is hit.

Conclusion

To add a grid layout to a React Material UI app, we can use the react-pure-grid library.