Need help with mcgriddle?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

125 Stars 4 Forks MIT License 125 Commits 1 Opened issues


A get-out-of-the-way Sass grid library. Supports flexbox.

Services available


Need anything else?

Contributors list

# 6,403
94 commits


McGriddle is a get-out-of-your-way Sass library designed to help you build based a grid system. Suports flexbox (the grid is based on floats, by default). Set up your grid system…

$grid-width  : 64em;
$grid-gutter : 1.875em;
$grid-columns: 12;

…and you’re ready to build.

.container { @include container; }
.article   { @include columns(8); }
.sidebar   { @include columns(4, last); }


  1. Install via npm, yarn or Bower. ``` npm install mcgriddle

yarn add mcgriddle

bower install mcgriddle ```

Also available as a Ruby gem to use within your Rails application—see below for more information.

Or to manually install it, download and unzip the source files. Then copy the files from the

directory into your project.
  1. Import the
    file in your Sass manifest file:
  @import "mcgriddle";

Install for Ruby on Rails

  1. Add McGriddle to your Gemfile.
  gem 'mcgriddle'
  1. Run
    bundle install
  2. Include McGriddle by using Sass’s native
  // application.scss
  @import "mcgriddle";

* More information on why Sass’s native

+ why you should ditch Sprockets directives altogether.


First, create a settings file (

) and import it before importing McGriddle.
@import "mcgriddle-settings";
@import "mcgriddle";

Then edit the settings file to customize/override default grid settings. The following is a list of settings and its defaults:

$grid-width          : 64em;
$grid-gutter         : 1.875em;
$grid-columns        : 12;
$grid-minor          : 1/3;
$grid-collapse       : false;
$grid-rtl            : false;

$grid-flexbox : false; $grid-flexbox-wrap : wrap; $grid-flexbox-justify: flex-start;

Read the documentation for a full list and explanation of settings, mixins and functions.


  1. Containers
  2. Columns
  3. Collapse gutters
  4. Flexbox support
  5. Right-to-left support


You’ll need a container to wrap the columns in.

.container {
  @include container;

// Container with no max width ($grid-width) .container--full { @include container(false); }


Then use

on an element to specify how many columns wide it should be.
.column {
  @include columns(8);

.column-decimal { @include columns(5.6); }

// Last column .column-last { @include columns(4, last); }

// Centered column .column-center { @include columns(8, center); }

// Relative columns .column-4-9 { @include columns(4 of 9); } .column-5-9 { @include columns(5 of 9, last); }

Nest columns by wrapping nested columns in a container.

Push an element however many columns with

// Shift a column over 2 columns
.column {
  @include columns(6);
  @include shift(2);


Collapse gutters:

$grid-collapse: true
. (Default is
$grid-collapse: true;
.container { @include container; }


Flexbox support (as opposed to floats):

$grid-flexbox: true
. (Default is
$grid-flexbox: true;
.container { @include container; }


Right-to-left support for RTL languages:

$grid-rtl: true
. (Default is
$grid-rtl: true;
.container { @include container; }

Be sure to read the documentation for a full list of settings, mixins and functions.

That’s it?

The documentation is still a work-in-progress, so there are features and functionality that have yet to be properly documented. I also have a couple more features I’d like to build (when and if I decide to), but aside from that… yep, that’s it.

I originally created McGriddle for me—I wanted something stupid simple and straight forward. Therefore if you’re looking for something more robust, I’d suggest Bourbon Neat or Susy.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.