React layout component based on CSS Grid Layout (Demo)

npm i react-css-grid

// Example usage
import React from 'react'
import Grid from 'react-css-grid'

class App extends React.Component {
  render () {
    return (
      <Grid
        width={320}
        gap={24}>
        <div>Column</div>
        <div>Column</div>
        <div>Column</div>
        <div>Column</div>
      </Grid>
    )
  }
}

• Responsive grid layout with zero media queries
• Simple API for handling tiled layouts
• Customizable column width and gutters

• width (number or string) width at which child elements will break into columns - either a number pixel value or any valid CSS width value as a string
• gap (number or string) gutter (grid-gap) between columns - either a number pixel value or any valid CSS width value as a string

See http://caniuse.com/#feat=css-grid

• Grid Styled
• styled-components
• CSS Grid Layout Module
• CSS Grid Layout on MDN
• Grid by Example
• Spring Into CSS Grid

MIT License