Skip to content
A get-out-of-the-way Sass grid library. Supports flexbox.
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.


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.

<section class="container">
  <article class="article"></article>
  <div class="sidebar"></div>
.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 _sass/mcgriddle directory into your project.

  1. Import the _mcgriddle.scss 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 @import*
// application.scss
@import "mcgriddle";

* More information on why Sass’s native @import + why you should ditch Sprockets directives altogether.


First, create a settings file (_mcgriddle-settings.scss) 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 columns() 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.

<div class="container">
  <div class="columns-9">
    <div class="container">
      <div class="columns-6"></div>
      <div class="columns-6"></div>
  <div class="columns-3"></div>

Push an element however many columns with shift().

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


Collapse gutters: $grid-collapse: true. (Default is false)

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


Flexbox support (as opposed to floats): $grid-flexbox: true. (Default is false)

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


Right-to-left support for RTL languages: $grid-rtl: true. (Default is false)

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

You can’t perform that action at this time.