Grid system based on styled-components and flexbox for React

   

Set of React components that implement flexboxgrid.css but with styled-components. Furthermore, it allows to customize grid configuration like gutter width…

Highly inspired by the excellent react-flexbox-grid which the API is nearly the same than this module.

Demo

Usage

Installation

npm i -S react-styled-flexboxgrid

react-styled-flexboxgrid depends on 2 peer dependencies:

• react@^0.14.0 || ^15.0.0-0 || ^16.0.0-0
• prop-types@^15.0.0-0
• styled-components@2

You should install them in your project.

Basic

import React from 'react'

import {Grid, Col, Row} from 'react-styled-flexboxgrid'

const App = props =>
  <Grid>
    <Row>
      <Col xs={6} md={3}>Hello, world!</Col>
    </Row>
  </Grid>

Read the full article on GitHub

View on GitHub