# react-auto-grid

> A module to handle grid in react

Latest version **1.1.8** (published 2021-06-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-auto-grid
pnpm add react-auto-grid
yarn add react-auto-grid
bun add react-auto-grid
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.8 |
| Published | 2021-06-03 |
| First published | 2020-04-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 46.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | praveenganesh |
| Maintainers | pk12121996 |
| Keywords | react, react-component, react-auto-grid, react-grid, react-layout, react-grid-layout, react-easy-grid |

## Links

- npm: https://www.npmjs.com/package/react-auto-grid
- Repository: https://github.com/praveenganesh/react-auto-grid
- Homepage: https://github.com/praveenganesh/react-auto-grid#README
- Issues: https://github.com/praveenganesh/react-auto-grid/issues
- npm.io page: https://npm.io/package/react-auto-grid

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.13.1
- [webpack](https://npm.io/package/webpack.md) ^4.42.1
- [styled-components](https://npm.io/package/styled-components.md) ^5.1.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.8 (latest) — 2021-06-03
- 1.1.7 — 2021-06-03
- 1.1.6 — 2021-06-03
- 1.1.5 — 2020-04-18
- 1.1.4 — 2020-04-15
- 1.1.3 — 2020-04-15
- 1.1.2 — 2020-04-15
- 1.1.1 — 2020-04-15
- 1.1.0 — 2020-04-15
- 1.0.9 — 2020-04-15
- 1.0.8 — 2020-04-15
- 1.0.7 — 2020-04-15
- 1.0.6 — 2020-04-15
- 1.0.5 — 2020-04-15
- 1.0.4 — 2020-04-15
- … 4 more at https://npm.io/package/react-auto-grid/versions

## README

# react-auto-grid

This component eases the grid handling in React.

By using this component you can change the position of the grid, can easily span grid size, no need to worry about the row, column things can easily set width and height of the layout, highly customizable grid layout.

![](https://i.ibb.co/b3mDMzH/img-gallery.png)

# Install

`$ npm i react-auto-grid`

# Example

```sh
import {Wrapper,Grid} from "react-auto-grid";

<Wrapper cols={3}>
  <Grid>
   <Child>1</Child>
  </Grid>
  ....
  ....
   <Grid>
     <Child>9</Child>
   </Grid>
</Wrapper
```

# Props

**Wrapper:**
| props | default value / use | description |
| ------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| cols | 3 (or) ["100px","200px","300px"] | specifies the number of columns in the layout / specifies the number of columns in the layout with size of each column |
| rowSize | ["100px","200px","300px"] | specifies the size of rows |
| colGap | 0px | gap between each columns |
| rowGap | 0px | gap between each rows |
| gap | 0px | gap between each rows and columns |
| width | auto | width of the wrapper |
| height | auto | height of the wrapper |

**Grid:**
| props | default value / use | description |
| -------- | ------------------- | ---------------------------------------- |
| colSpan | 1 | specifies grid to span number of columns |
| rowSpan | 1 | specifies grid to span number of rows |
| position | [1,1] | change the position of child in grid |
| width | auto | width of the grid |
| height | auto | height of the grid |

# Browser support

functions in all active browers

![](https://i.ibb.co/MVffFKj/Screen-Shot-2021-05-14-at-10-26-39-AM.png)
source from https://caniuse.com/

# Examples and usage

**simple layout**

![](https://i.ibb.co/10zm22N/simple.png)

```
<Wrapper cols={3}>
  <Grid>
    <Child>1</Child/>
  </Grid>
....
  <Grid>
    <Child>9</Child/>
  </Grid>
</Wrapper>
```

**row span**

![](https://i.ibb.co/4pQS2F6/row-span.png)

```
<Wrapper cols={3}>
 <Grid rowSpan={2}>
   <Child>1</Child/>
 </Grid>
....
  <Grid colSpan={3}>
   <Child>9</Child/>
  </Grid>
</Wrapper>
```

**colmn span**

![](https://i.ibb.co/44LSmm3/col-span.png)

```
<Wrapper cols={3}>
 <Grid colSpan={2}>
   <Child>1</Child/>
  </Grid>
....
  <Grid colSpan={3}>
   <Child>9</Child/>
  </Grid>
</Wrapper>
```

**row size**

![](https://i.ibb.co/Z8YJs6K/row-size.png)

```
<Wrapper rowSize={["100px", "200px", "300px"]} cols={3}>
  <Grid >
    <Child>1</Child/>
  </Grid>
....
  <Grid>
    <Child>9</Child/>
  </Grid>
</Wrapper>
```

**row gap**

![](https://i.ibb.co/RS5cmw9/row-gap.png)

```
<Wrapper rowGap="10px" cols={3}>
  <Grid >
    <Child>1</Child/>
  </Grid>
....
  <Grid>
    <Child>9</Child/>
  </Grid>
</Wrapper>
```

**position**

![](https://i.ibb.co/KWqRCC4/position.png)

```
<Wrapper cols={3}><Grid position={[1,1]}>
  <Grid>
   <Child>1</Child/>
  </Grid>
....
  <Grid>
   <Child>9</Child/>
  </Grid>
</Wrapper>
```

**Gap**

![](https://i.ibb.co/nR45P3Y/gap.png)

```
<Wrapper gap="10px" cols={3}>
  <Grid>
   <Child>1</Child/>
  </Grid>
...
  <Grid>
   <Child>9</Child/>
  </Grid>
</Wrapper>
```

**column start**

![](https://i.ibb.co/rxFLhjD/col-start.png)

```
<Wrapper cols={3}>
  <Grid position={[1]}>
    <Child>1</Child/>
  </Grid>
....
  <Grid>
    <Child>9</Child/>
  </Grid>
</Wrapper>
```

**column size**

![](https://i.ibb.co/mT1rB7H/col-size.png)

```
<Wrapper cols={["100px","200px","300px"]}>
  <Grid>
    <Child>1</Child/>
  </Grid>
....
  <Grid>
    <Child>9</Child/>
  </Grid>
</Wrapper>
```

**column Gap**

![](https://i.ibb.co/1RwGVSF/col-gap.png)

```
<Wrapper colGap="10px" cols={3}>
  <Grid>
    <Child>1</Child/>
  </Grid>
....
  <Grid>
    <Child>9</Child/>
  </Grid>
</Wrapper>
```

**column**

![](https://i.ibb.co/Qb9fjQM/cols.png)

```
<Wrapper  cols={2}>
  <Grid>
    <Child>1</Child/>
  </Grid>
....
  <Grid>
    <Child>9</Child/>
  </Grid>
</Wrapper>
```

---
_Source: https://npm.io/package/react-auto-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._