React-Grid-Layout

This is a grid system for react, similar to bootstrap-grid allows you to use Container, Row and Col components in your React applications

Setup

# Using yarn
> yarn add @w01f-o/react-grid-layout
# Using npm
> npm install @w01f-o/react-grid-layout

Usage

import {Row, Container, Col} from '@w01f/react-grid-layout'

const App = () => {
  return (
    <>
      <Container>
        <Row>
          <Col>

          </Col>
          <Col>

          </Col>
        </Row>
      </Container>
    </>
  );
};

export default App;

In the root component.

import '@w01f-o/react-grid-layout/css'

Available props

For all components className, resetOffset, as well as all attributes related to HTMLDivElement

<Container className="example__container" resetOffset>
    <Row className="example__row" resetOffset></Row>
</Container>

For Col component - xxl, xl, lg, md, sm, xs

<Container>
    <Row>
        <Col xxl={12} xl={6} lg={3} md={6} sm={12} xs={12}>
        </Col>
        <Col xxl={12} xl={6} lg={3} md={6} sm={12} xs={12}>
        </Col>
        <Col xxl={12} xl={6} lg={3} md={6} sm={12} xs={12}>
        </Col>
        <Col xxl={12} xl={6} lg={3} md={6} sm={12} xs={12}>
        </Col>
    </Row>
</Container>

Breakpoints

| xxl | xl | lg | md | sm | xs | |------------|-------------|-----------|-------------|-----------|-----------| | >= 1400px | >= 1200px | >= 992px | >= 768px | >= 576px | < 576px |

License

MIT License