React-content-grid NPM

React Content Grid

A minimal grid system for React that implements Rows and Columns. Contributions and feedback are very welcome. Thanks to Radium, which this module is based on.

This module is currently under development. See changelog at the end of this file for information about the current and previous versions.

Installation & Usage

Install the module via npm:
npm install react-content-grid

Include Row and Column Components where you need them:

//using ES6 modules
import { Row, Column } from 'react-content-grid';

//using CommonJS modules
var Row = require('react-content-grid').Row;
var Column = require('react-content-grid').Column;

Make grids layouts!

   <Row>
     <Column width="8">
       //your stuff goes here
     </Column>
     <Column width="4">
       //or here
     </Column>
   </Row>

The grid works pretty much like any other grid from any frontend framework:

A row takes up 100% of the available width
Columns take up the number of columns specified in the width prop
It's responsive meaning columns can wrap on small screens

The width of a column can be specified via its props. If needed, different widths can be used for different screen sizes:

width
mediumWidth
smallWidth

They are all optional, expect integers and default to the full width of the parent row.

By default the grid follows the specifications from the next section. But they can easily be customized by passing props to the row component. That means each row can have its own specifications.

Row Specifications

Here's a full list of specifications that go into a row:

numberOfColumns
default: 16
The number of columns that make up one row.
maxWidth
default: 1200
The maximum width of the row in pixels. The row will horizontally centered on a bigger window.
mediumMaxWidth
default: 1024
The breakpoint in pixels up to which width the mediumWidth prop in a column should be applied.
smallMaxWidth
default: 768
The breakpoint in pixels up to which width the smallWidth prop in a column should be applied.

The specifications above correspond directly to props that can be passed to a row component.