react-grids
grid system for react
Last updated 2 years ago by wonilsuh .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-grids 
SYNC missed versions from official npm registry.

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) => (
    <ReactGrids.Wrap
        cutoff={599}
        align="center"
        className="my-grids-wrapper"
        max-width={900}
    >
        <ReactGrids.Column
            base={12}
            span={5}
        >
            Left column
        </ReactGrids.Column>
        <ReactGrids.Column
            base="12" 
            span="7"
        >
            Right column
        </ReactGrids.Column>
    </ReactGrids.Wrap>
)

export default YourComponent;

Current Tags

  • 1.0.16                                ...           latest (2 years ago)

17 Versions

  • 1.0.16                                ...           2 years ago
  • 1.0.15                                ...           2 years ago
  • 1.0.14                                ...           3 years ago
  • 1.0.13                                ...           3 years ago
  • 1.0.12                                ...           3 years ago
  • 1.0.11                                ...           3 years ago
  • 1.0.10                                ...           3 years ago
  • 1.0.9                                ...           3 years ago
  • 1.0.8                                ...           3 years ago
  • 1.0.7                                ...           3 years ago
  • 1.0.6                                ...           3 years ago
  • 1.0.5                                ...           3 years ago
  • 1.0.4                                ...           3 years ago
  • 1.0.3                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 3
Dependencies (28)
Dependents (1)

Copyright 2014 - 2017 © taobao.org |