2.2.1 • Published 9 months ago

@w01f-o/react-grid-layout v2.2.1

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

React-Grid-Layout

npm download npm version License

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

xxlxllgmdsmxs
>= 1400px>= 1200px>= 992px>= 768px>= 576px< 576px

License

MIT License

2.2.1

9 months ago

2.2.0

9 months ago

2.1.0

9 months ago

2.0.0

9 months ago

1.1.4

11 months ago

1.1.3

11 months ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago