Skip to content
React layout component based on CSS Grid Layout and built with styled-components
Branch: master
Clone or download
Latest commit 0002db8 Sep 1, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Build docs Aug 30, 2017
src Adjust prop types Aug 30, 2017
.babelrc Rewrite with CSS grid layout Aug 28, 2017
.gitignore Add docs setup Aug 29, 2017
.npmignore Edit ignore Aug 30, 2017
.travis.yml Edit readme Aug 28, 2017
LICENSE.md Edit readme Aug 28, 2017
README.md Edit readme Sep 1, 2017
package.json Remove storybook Aug 30, 2017
test.js Add tests Aug 30, 2017
test.js.md Clean up Aug 30, 2017
test.js.snap Clean up Aug 30, 2017
webpack.config.js Add docs setup Aug 29, 2017

README.md

React CSS Grid

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

Build Status GitHub

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>
    )
  }
}

Features

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

Props

width (number or string)

Sets the width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length.

<Grid width={512} />

gap (number or string)

Sets the gutter (grid-gap) between columns. Pass a number for pixel values or a string for any other valid CSS length.

<Grid gap={16} />

align (string)

Sets align-items to control child element alignment.

Browser Support

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

Related

MIT License

You can’t perform that action at this time.