josephrexme / griz

Grid library for React; Rescue the cat

Griz

A grid system for React applications based on flexbox and styled-components. See the demo. Griz uses styled-components. But there's also a Sass/CSS version.

Installation

npm install griz

Usage

import {Grid, GridCol} from 'griz';

const App = () => (
  <Grid>
    <GridCol>I take up 50%</GridCol>
    <GridCol>Me too!</GridCol>
  </Grid>
);

<Grid> defines a row and <GridCol> defines the columns. The number of <GridCol> placed in a <Grid> will automatically take up the space required without any specification. But you can also specify columns.

Responsiveness

const App = () => (
  <Grid responsiveSm>
    <GridCol>I'm your half</GridCol>
    <GridCol>You're my half</GridCol>
  </Grid>
  <Grid responsiveMd>
    <GridCol>I am Rick</GridCol>
    <GridCol>I am Morty</GridCol>
  </Grid>
  <Grid responsiveLg>
    <GridCol>I am Batman</GridCol>
    <GridCol>I am uh... uh... uh.. Batman</GridCol>
  </Grid>
);

Gutters

Custom widths can be set to override the default 10px gutter width

const App = () => (
  <Grid gutterWidth="20">
    <GridCol>So close Jack</GridCol>
    <GridCol>So close Rose</GridCol>
  </Grid>
);

You could set custom width to 0 for a gutterless grid or you can simply use gutterless.

const App = () => (
  <Grid gutterless>
    <GridCol>So close Jack</GridCol>
    <GridCol>So close Rose</GridCol>
  </Grid>
);

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.

const App = () => (
  <Grid>
    <GridCol column="60"></GridCol>
    <GridCol column="40"></GridCol>
  </Grid>
);

Offsets

const App = () => (
  <Grid>
    <GridCol offset="25"></GridCol>
  </Grid>
);

For more column and offset values at work, see the demo.

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 for more information.

Acknowledgements

Original idea by Phillip Walton
Much thanks to ionic framework for building on that
And this wouldn't be possible without styled-components