Have ideas to improve npm?Join in the discussion! »

react-auto-grid

1.1.5 • Public • Published

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>

Install

npm i react-auto-grid

DownloadsWeekly Downloads

17

Version

1.1.5

License

MIT

Unpacked Size

47.7 kB

Total Files

4

Last publish

Collaborators

  • avatar