Nameless Package Manager

    griz

    1.3.1 • Public • Published

    Griz

    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

    Install

    npm i griz

    DownloadsWeekly Downloads

    34

    Version

    1.3.1

    License

    MIT

    Last publish

    Collaborators

    • josephrexme