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

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

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

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

Sets align-items to control child element alignment.

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

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

MIT License