Awesome Open Source
Awesome Open Source


npm version Build Status NPM Status js-standard-style

Set of React components that implement flexboxgrid.css but with styled-components/emotion. 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.




npm i -S react-styled-flexboxgrid

react-styled-flexboxgrid depends on 2 peer dependencies:

You should install them in your project.


import React from 'react'

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

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


The <Grid> component is optional and can help to wrap children in a fixed/fluid container. Use the configuration container for fixed width value.

  • fluid (Boolean): Create a responsive fixed width container or a full width container, spanning the entire width of your viewport. Default: false


  • reverse (Boolean): Use flex-direction: row-reverse. Default: false
  • start
  • center
  • end
  • top
  • middle
  • bottom
  • around
  • between
  • first
  • last (String(xs|sm|md|lg): Align elements to the start or end of row as well as the top, bottom, or center of a column.


  • reverse (Boolean): Use flex-direction: column-reverse. Default: false
  • xs
  • sm
  • md
  • lg (Boolean|Integer):
    • When true, enable auto sizing column.
    • When false, hide colomn for the breakpoint.
    • When integer value, it specify the column size on the grid. (1 to 12)
  • xsOffset
  • smOffset
  • mdOffset
  • lgOffset (Integer): Offset the column.


The grid use same defaults than flexboxgrid.css.

You can customize values using <ThemeProvider> component from styled-components. react-styled-flexboxgrid will looks at the flexboxgrid property in the theme.

import React from 'react'

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

const theme = {
  flexboxgrid: {
    // Defaults
    gridSize: 12, // columns
    gutterWidth: 1, // rem
    outerMargin: 2, // rem
    mediaQuery: 'only screen',
    container: {
      sm: 46, // rem
      md: 61, // rem
      lg: 76  // rem
    breakpoints: {
      xs: 0,  // em
      sm: 48, // em
      md: 64, // em
      lg: 75  // em

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

Use with Emotion

To use react-styled-flexboxgrid with emotion, import from 'react-styled-flexboxgrid/emotion':

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

Related projects



Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (70,402
react (5,468
styled-components (238
grid (222
flexbox (101