@w01f-o/react-grid-layout

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, as well as all attributes related to HTMLDivElement

<Container className="example__container">
    <Row className="example__row"></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>

To reset the offset of Col, Row or Container

<Row className="offset-0"></Row>

Breakpoints

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

License

MIT License