Skip to content
Grid system based on styled-components and flexbox for React
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Update styled components to v4 Dec 12, 2018
src Update all dependencies Sep 14, 2018
.travis.yml Add Oct 17, 2017
emotion.js Add support for emotion Sep 14, 2018
karma.conf.js Update all dependencies Sep 14, 2018
package.json 3.1.0 Feb 22, 2019
rollup.config.js Update all dependencies Sep 14, 2018
tslint.json Add TypeScript definitions Sep 14, 2018


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:

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


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



You can’t perform that action at this time.