react-css-grid

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

Usage no npm install needed!

<script type="module">
  import reactCssGrid from 'https://cdn.skypack.dev/react-css-grid';
</script>

README

React CSS Grid

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

Build Status

http://jxnblk.com/react-css-grid

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