CSS Grid Layout For React – react-css-grid

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:

 

Download Details:

Author: jxnblk

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/jxnblk/react-css-grid

License: MIT