react-fluid-grid
Responsive layout similar to pinterest. Items placed in columns according to their order and height.
Installation
npm i --save react-fluid-grid
Usage
Simply put components under FluidGrid component.
<FluidGrid> <ItemComponent /> <ItemComponent /> <ItemComponent /> <div> <h1>'Any node'</h1> </div> </FluidGrid>
Example with optional props:
const styleStrategies = mediaQuery: '(max-width: 719.9px)' style: numberOfColumns: 1 gutterHeight: 5 gutterWidth: 0 mediaQuery: '(min-width: 720px) and (max-width: 1023.9px)' style: numberOfColumns: 2 gutterHeight: 15 gutterWidth: 15 mediaQuery: '(min-width: 1024px)' style: numberOfColumns: 3 gutterHeight: 30 gutterWidth: 30 const transition = 'top 100ms ease-in-out, left 100ms ease-in-out' <FluidGrid className='my-grid' itemClassName='my-grid-item' styleStrategies=styleStrategies transition=transition > <ItemComponent /> <ItemComponent /> <ItemComponent /> <div> <h1>'Any node'</h1> </div> </FluidGrid>
Props
className
Optional. Class name that will be assigned to the grid's containing div element.
itemClassName
Optional. Class name that will be assigned to the grid items' containing div elements.
styleStrategies
Optional. An array of styleStrategies that allows to control number of columns and gutter sizes in a responsive way.
Shape:
styleStrategies: PropTypes
mediaQuery
A string containing media query. For example: (min-width: 720px) and (max-width: 1023.9px)
. style
of the first matching mediaQuery
is applied to the grid.
style
An object that defines grid style for a given media. Must have following attributes:
- numberOfColumns: number
- gutterHeight: number, gutter height in pixels
- gutterWidth: number, gutter width in pixels
transition
Optional. css transition property value. Defaut: top 200ms ease-in-out, left 200ms ease-in-out
.