react-grider

React Grider is a css-grid based micro-library.

Install

npm install --save react-grider

Basic Usage

React Grider is set by default to build a grid with four 25% width columns and a infinite number of rows with automatic height.

import React, { Component } from 'react'
import Grider from 'react-grider'

export default class App extends Component {
  render () {
    return (
        <Grider>
            <Grider.Item>
                Test
            </Grider.Item>
            <Grider.Item>
                Test
            </Grider.Item>
            <Grider.Item>
                Test
            </Grider.Item>
            <Grider.Item>
                Test
            </Grider.Item>
        </Grider>
    )
  }
}

Define a custom grid

You can define your own grid by setting the cols,rows,gap,height and width props on the Grider component and colStart,colEnd,rowStart,rowEnd in the Grider.Item component props. I'ts possible to view a wireframe of your items by adding the prop wireframe to the Grider.Item.

import React, {
  Component
} from 'react'

import Grider from 'react-grider'

export default class App extends Component {
  render() {
    return ( 
        <Grider 
            gap="10px"
            height="auto" 
            width="100%" 
            cols="25% 50% 25%" 
            rows="250px 200px">
            <Grider.Item 
                colStart={1}
                colEnd={1}
                rowStart={1} 
                rowEnd={3}
                wireframe>
                    Item 1
            </Grider.Item>
            <Grider.Item 
                colStart={2}
                colEnd={2}
                rowStart={1} 
                rowEnd={2}
                wireframe>
                    Item 2
            </Grider.Item>
            <Grider.Item 
                colStart={2}
                colEnd={4}
                rowStart={2} 
                rowEnd={2}
                wireframe>
                    Item 3
            </Grider.Item>
            <Grider.Item 
                colStart={3}
                colEnd={3}
                rowStart={1} 
                rowEnd={1}
                wireframe>
                    Item 4
            </Grider.Item>
        </Grider>              
    )
  }
}

cols and rows could be an integer also. If you use an integer to define them, the grid will be divided in n equal columns and rows in relation to the sizes of the the Grider component's.

import React, { Component } from 'react'

import Grider from 'react-grider'

export default class App extends Component {
  render () {
    return (
        <Grider 
            gap="10px"
            height="300px" 
            width="100%" 
            cols={4} 
            rows={4}>
            <Grider.Item wireframe>
                Item 1
            </Grider.Item>
            <Grider.Item wireframe>
                Item 2
            </Grider.Item>
            <Grider.Item wireframe>
                Item 3
            </Grider.Item>
            <Grider.Item wireframe>
                Item 4
            </Grider.Item>
            <Grider.Item wireframe>
                Item 5
            </Grider.Item>
            <Grider.Item 
                colStart={2} 
                colEnd={5} 
                wireframe>
                Item 6
            </Grider.Item>
        </Grider>
    )
  }
}

Custom className

It's possible to add custom css class to your items by using the prop className

<Grider.Item className="customClass" wireframe>
    Test
</Grider.Item>

What's next?

I'm working to add a template feature with named areas.

License

MIT © VLK-STUDIO