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>