react-grids

Introduction

An easy to use simple grid layout system for React. Allows to specify base grids, and span for each column such as 5/12 - 7/12, or 1/5 - 4/5 grids.

Install

$ npm install --save-dev react-grids

Properties

ReactGrids.Wrap

cutoff:int // when to break from grids to single stack for responsive layouts

align:string // when the columns don't fill the fulll width, how to align them within the wrap. accepts left | center | right.

max-width:int // set maximum width for the layout

ReactGrids.Column

base:int // the base grids. accepts 1 to 12

span:int // how many base grids should this column span over. should be 1 <= x <= base.

Use

``
'use strict';
import ReactGrids from 'react-grids';

const YourComponent = (props) => (
cutoff={599}
align="center"
className="my-grids-wrapper"
max-width={900}
>
base={12}
span={5}
>
Left column

base="12"
span="7"
>
Right column


)

export default YourComponent;
``