react-global-grid

react-global-grid

Components for creating a global CSS grid system in your React project.

Peer Dependencies (Requirements)

• react
• styled-system
• rebass

Install

npm install --save react-global-grid

Usage

import React from 'react'
import { ThemeProvider } from 'styled-components'
import { Grid, Column } from 'react-global-grid'

const theme = {
  gridStyles: {
    gridTemplateColumns: 'repeat(12, 1fr)',
    gridGap: 20
  }
}

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Grid>
        <Column span='1 / 4'>column 1</Column>
        <Column span='5 / -1'>column 2</Column>
      </Grid>
    </ThemeProvider>
  )
}

Further reading

Read more about it on Medium

License

MIT UseAllFive