React-global-grid NPM

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