React CSS Grid
React layout component based on CSS Grid Layout and built with styled-components
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
