https://github.com/nem035/react-gridit

React grid using CSS Grid and styled-components
https://github.com/nem035/react-gridit

css-grid react styled-components

Last synced: 3 months ago
JSON representation

React grid using CSS Grid and styled-components

• Host: GitHub
• URL: https://github.com/nem035/react-gridit
• Owner: nem035
• Created: 2017-12-31T06:27:06.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-01-03T17:56:51.000Z (about 7 years ago)
• Last Synced: 2024-09-24T09:07:24.566Z (4 months ago)
• Topics: css-grid, react, styled-components
• Language: JavaScript
• Homepage: https://github.com/nem035/react-gridit
• Size: 127 KB
• Stars: 96
• Watchers: 6
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


	

  	

  



# [react-gridit](https://www.npmjs.org/package/react-gridit)

React grid using [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) and [styled-components](https://www.styled-components.com/)

## Install

```bash

npm i react-gridit

```

or

```bash

yarn add react-gridit

```

## Examples

[![Codesandbox examples](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/10p4l2m33) or checkout the [examples](https://github.com/nem035/react-gridit/tree/master/examples) React app.

You can run the examples locally by doing `npm run examples`.

### Rows

```jsx

  1

  2

  3

  4

  5

```

Output:



### Columns

```jsx

  1

  2

  3

  4

  5

```



### Nesting

```jsx

  

    1

    3

  

  

    1

  

  

    1

    4

    2

  

```



### Areas

```jsx

  Header

  Sidebar

  Main1

  Main2

  Footer

```

Output:



### Responsive areas

```jsx

  A

  B

  C

  D

```

Output (match):



Output (no match):



## License

MIT