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

1. Install the module via npm:

npm install react-content-grid

2. 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;

3. 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.

Changelog

@0.0.5

first working version

@0.0.6

added basic documentation

@0.0.9

added support for max width to row

@0.0.10

fixed media query overwriting issue

@0.0.11

• added support for classes of rows and columns
• fixed raw text display name bug

@0.0.12

• fixed small bug in columns media queries