React-Styled-Flexboxgrid

Grid system based on styled-components and flexbox for React

npm version Build Status NPM Status js-standard-style

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

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.