https://github.com/useallfive/react-global-grid

React components for defining and implementing a global CSS grid
https://github.com/useallfive/react-global-grid

css css-grid grid grid-layout react

Last synced: 2 months ago
JSON representation

React components for defining and implementing a global CSS grid

• Host: GitHub
• URL: https://github.com/useallfive/react-global-grid
• Owner: UseAllFive
• Created: 2020-05-08T18:11:45.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2021-08-12T17:22:58.000Z (almost 5 years ago)
• Last Synced: 2025-10-28T18:22:07.314Z (8 months ago)
• Topics: css, css-grid, grid, grid-layout, react
• Language: JavaScript
• Homepage: https://useallfive.github.io/react-global-grid/
• Size: 1.74 MB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-global-grid

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

[![NPM](https://img.shields.io/npm/v/react-global-grid.svg)](https://www.npmjs.com/package/react-global-grid) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Peer Dependencies (Requirements)

- react

- styled-system

- rebass

## Install

```bash

npm install --save react-global-grid

```

## Usage

```jsx

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 (

    

      

        column 1

        column 2

      

    

  )

}

```

## Further reading

[Read more about it on Medium](https://medium.com/swlh/one-css-grid-to-rule-them-all-3e3386ad6155?source=friends_link&sk=521d01ba34820e8096c8075164dcee5f)

## License

MIT © [UseAllFive](https://github.com/UseAllFive)