React-grid-is-good NPM

React Grid System

Installation

npm install react-grid-is-good

Features

inline styles
flex
responsive
custom breakpoints with your own names
automatically breaks overflowing rows
based on Bootstrap styles

Examples

import React, { Component } from 'react';
import { Grid, Span, Visible, Hidden } from 'react-grid-is-good';

class GridComponent extends Component {
  render() {
    return (
      <div>
        <Grid>
          <Span size="25%">#1</Span>
          <Span size="75%">#2</Span>
        </Grid>
        
        <Grid align="center">
          <Span size="1/2">#1</Span>
          <Span size="1/2">#2</Span>
        </Grid>
        
        <Grid size="12">
          <Span size="6">#1</Span>
          <Span size="6">#2</Span>
          <Span size="3">#3</Span>
          <Span size="3">#4</Span>
          <Span size="6">#5</Span>
        </Grid>
        
        <Grid size="12">
          <Span size="3">#1</Span>
          <Span size="3" push="3">#2</Span>
        </Grid>
        
        <Grid size="12">
          <Span size="3" push="6">#1</Span>
          <Span size="3">#2</Span>
        </Grid>
        
        <Grid breakpoint="small" size="12">
          <Span sizeSmall="6">#1</Span>
          <Span sizeSmall="6">#2</Span>
        </Grid>
        
        <Visible breakpoint="tablet" mobile tablet>
          I am visible when breakpoint is "tablet" or "mobile"
        </Visible>

        <Hidden breakpoint="sm" md lg>
          I am hidden when breakpoint is "md" or "lg"
        </Hidden>
      </div>
    );
  }
}

Component properties

Grid

breakpoint {string} [breakpoint]
size {number} [size=12]
gutter {number} [gutter=0]
align {string} [align='left']
valign {string} [valign='top']
...props based on your breakpoint, for example if you pass breakpoint="desktop" and sizeDesktop="12" then size will be 12