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.

Install

$ npm i react-auto-grid

Example

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

source from https://caniuse.com/

Examples and usage

simple layout

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

row span

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

colmn span

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

row size

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

row gap

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

position

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

Gap

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

column start

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

column size

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

column Gap

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

column

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