react-fluid-grid

Responsive layout similar to pinterest. Items placed in columns according to their order and height.

Live Demo

Installation

npm i --save react-fluid-grid

Usage

Simply put components under FluidGrid component.

import React from 'react'
import FluidGrid from 'react-fluid-grid'
import ItemComponent from './path/to/ItemComponent'

export default () => (
  <FluidGrid>
    <ItemComponent />
    <ItemComponent />
    <ItemComponent />
    <div>
      <h1>{'Any node'}</h1>
    </div>
  </FluidGrid>
)

Example with optional props:

import React from 'react'
import FluidGrid from 'react-fluid-grid'
import ItemComponent from './path/to/ItemComponent'
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'

export default () => (
  <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.arrayOf(PropTypes.shape({
  mediaQuery: PropTypes.string.isRequired,
  style: PropTypes.shape({
    numberOfColumns: PropTypes.number.isRequired,
    gutterHeight: PropTypes.number.isRequired,
    gutterWidth: PropTypes.number.isRequired
  })
}))

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.

Maintainers

AntonRublev360