CSS Grid Layout For React – react-css-grid

Description:

React layout component based on CSS Grid Layout and built with styled-components.

Installation:

# NPM
$ npm install react-css-grid --save

Features:

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

Basic usage:

import React from 'react'
import Grid from 'react-css-grid'
class App extends React.Component {
  render () {
    return (
      <Grid
        width={300}
        gap={20}>
        <div>Column</div>
        <div>Column</div>
        <div>Column</div>
        <div>Column</div>
      </Grid>
    )
  }
}

Props.

{
  // width of grid items
  width: 320,
  // space between grid items
  gap: 32,
  // alignment
  align: 'baseline'
}

Preview: