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