CSS Grid Layout For React – react-css-grid

Category: Featured , Layout , React | December 29, 2017
Author: jxnblk
Views Total: 199
Official Page: Go to website
Last Update: December 29, 2017
License: MIT

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:

react-css-grid