Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/josephrexme/griz
Grid library for React; Rescue the cat
https://github.com/josephrexme/griz
flexbox grid grid-system react styled-components
Last synced: about 2 months ago
JSON representation
Grid library for React; Rescue the cat
- Host: GitHub
- URL: https://github.com/josephrexme/griz
- Owner: josephrexme
- License: mit
- Created: 2017-07-13T07:39:44.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-08-16T18:58:10.000Z (about 6 years ago)
- Last Synced: 2024-07-05T09:38:09.074Z (3 months ago)
- Topics: flexbox, grid, grid-system, react, styled-components
- Language: JavaScript
- Homepage: https://josephrexme.github.io/griz/
- Size: 380 KB
- Stars: 103
- Watchers: 7
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Griz
A grid system for React applications based on flexbox and [styled-components](https://www.styled-components.com). See the [demo](https://josephrexme.github.io/griz/). Griz uses [styled-components](https://www.styled-components.com). But there's also a [Sass/CSS version](https://gist.github.com/josephrexme/e71e5502b09b5421084f32dcdce8247a).
### Installation
```sh
npm install griz
```
### Usage
```jsx
import {Grid, GridCol} from 'griz';
const App = () => (
I take up 50%
Me too!
);
```
`` defines a row and `` defines the columns. The number of `` placed in a `` will automatically take up the space required without any specification. But you can also [specify columns](#columns).
#### Responsiveness
```jsx
const App = () => (
I'm your half
You're my half
I am Rick
I am Morty
I am Batman
I am uh... uh... uh.. Batman
);
```
#### Gutters
Custom widths can be set to override the default 10px gutter width
```jsx
const App = () => (
So close Jack
So close Rose
);
```
You could set custom width to 0 for a gutterless grid or you can simply use gutterless.
```jsx
const App = () => (
So close Jack
So close Rose
);
```
#### Columns
Think of the total as a 100 and throw in any value that you divide for any ratio you want. Could be 50:50 for a 2 equal sized grid, 60:40, and so on.
```jsx
const App = () => (
);
```
#### Offsets
```jsx
const App = () => (
);
```
For more column and offset values at work, see the [demo](https://josephrexme.github.io/griz/).
#### Wrapping columns
When column value is not defined you get the benefit of automatically fitting in the columns on one line of the row. If you need wrapping columns you'll have to specify a column value. A common case for this is when iterating items programmatically.
### License
Licensed under MIT License, Copyright © Joseph Rex
See [LICENSE](https://github.com/josephrexme/griz/blob/master/LICENSE) for more information.
### Acknowledgements
Original idea by [Phillip Walton](http://philipwalton.github.io/solved-by-flexbox/demos/grids/)
Much thanks to [ionic framework](http://ionicframework.com/docs/components/#grid) for building on that
And this wouldn't be possible without [styled-components](https://www.styled-components.com)