react-grid-system

react-grid-system

A no CSS Bootstrap-like responsive grid system for React.

Installation

npm install react-grid-system --save

Responsive grid components

Three components are provided for creating responsive grids: Container, Row, and Col.

An example on how to use these:

<Container>
  <Row>
    <Col sm={4}>
      One of three columns
    </Col>
    <Col sm={4}>
      One of three columns
    </Col>
    <Col sm={4}>
      One of three columns
    </Col>
  </Row>
</Container>

Responsive utilities

Three components are provided for creating responsive grids: Visible and Hidden.

Some examples on how to use these:

<p>
  <span>Your current screen class is </span>
  <Visible xs><strong>xs</strong></Visible>
  <Visible sm><strong>sm</strong></Visible>
  <Visible md><strong>md</strong></Visible>
  <Visible lg><strong>lg</strong></Visible>
  <span>.</span>
</p>

<Visible xs sm>
  <p>Paragraph visible on extra small and small.</p>
</Visible>
<Hidden xs sm>
  <p>Paragraph hidden on extra small and small.</p>
</Hidden>
<Visible md lg>
  <p>Paragraph visible on medium and large.</p>
</Visible>
<Hidden md lg>
  <p>Paragraph hidden on medium and large.</p>
</Hidden>

Context types

The following child context types can be provided to the grid components, to alter their responsive behavior:

Context Type	Default Value	Description
phone	false	When set to true, a default viewport width of 375 pixels will be used, in case the viewport width cannot be determined by using the window object. This is useful for server-side rendering.
tablet	false	When set to true, a default viewport width of 768 pixels will be used, in case the viewport width cannot be determined by using the window object. This is useful for server-side rendering.
breakpoints	[768, 992, 1200]	The breakpoints (minimum width) of devices in screen class sm, md, and lg. The default values are based on the Bootstrap 3 breakpoints.
containerWidths	[750, 970, 1170]	The container widths in pixels of devices in screen class sm, md, and lg. The default values are based on the Bootstrap 3 container widths.

Example Application and Documentation

An simple example application using all the features of react-grid-system can be found at https://github.com/zoover/react-grid-system/tree/master/example.

More examples and documentation of all components can be found at the GitHub pages: https://zoover.github.io/react-grid-system/