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.

npm install griz

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.

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

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

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

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

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

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.

Licensed under MIT License, Copyright © Joseph Rex

See LICENSE for more information.

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