README
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
andwidth
props on theGrider
component andcolStart
,colEnd
,rowStart
,rowEnd
in theGrider.Item
component props. I'ts possible to view a wireframe of your items by adding the propwireframe
to theGrider.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
androws
could be an integer also. If you use an integer to define them, the grid will be divided inn
equal columns and rows in relation to the sizes of the theGrider
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