Skip to content
Rework CSS plugin for generating custom, lightweight flex grids.
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.

Rework Flex Grid

Build Status

Rework CSS plugin for generating custom, lightweight flex grids.


Every project is different.

You should be able to create a grid on the fly that's catered to your project. If you only want 8 columns you can create a grid with exactly 8 columns rather than being stuck with 12. This helps to avoid unnecessary bloat in your CSS. This grid generator uses flex to dramatically reduce CSS declarations in the grid system.


Rework Flex Grid creates a grid system that is 100% mobile-first. This ensures that mobile browsers aren't forced to parse media queries when they're not applicable. Less parsing means faster rendering which means faster load-to-content times which means happier users. Yay.


You come up with your own naming scheme for classes. You set the breakpoints. You decide if you want column offsets. It's all in the configuration.

Low Specificity

All grid classes have a specificity value of 10. They consist of one class, and exactly one class, resulting in CSS similar to:

.gridClass {
  /* ... */

.gridClass-rowClass {
  /* ... */

.gridClass-rowClass-columnClass-1-12 {
  /* ... */

.gridClass-rowClass-columnClass-offset-1 {
  /* ... */

@media screen and (min-width: 32rem) {
  .gridClass-rowClass-columnClass--sm {
    /* ... */

This ensures that the grid won't stomp on your styles, and makes it easy for you to override defaults.


npm install --save rework-flex-grid


var fs       = require('fs'),
    rework   = require('rework'),
    flexGrid = require('rework-flex-grid');

var flexGridOptions = {
  numColumns: 12,
  classNames: {
    grid: 'g',
    row: 'r',
    col: 'c'
  mediaQueries: {
    sm: '32rem',
    md: '48rem',
    lg: '64rem'
  offsets: true

var css = fs.readFileSync('css/my-file.css', 'utf8').toString();
var out = rework(css).use(flexGrid(flexGridOptions)).toString();

Note: This plugin produces CSS that should be prefixed.


  • numColumns, Number for the number of columns. Defaults to 12.
  • classNames, Object with grid, row, and col. Defaults to g, r, and c respectively.
  • mediaQueries, Object with sm, md, and lg. Defaults to 32rem, 48rem, and 64rem respectively.
  • offsets, Boolean to determine whether to include offsets or not. Defaults to false.


  • Create a mini app to allow people to generate grids in their browser.
  • Offset configuration.
  • Media queries.
  • Media query configuration.
  • Make default grid classes responsive 12 > 6 > 1





  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Crafted with <3 by John Otander (@4lpine).

You can’t perform that action at this time.