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

Downloads in past


12510.5.07 years ago8 years agoMinified + gzip package size for mcgriddle in KB


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:

```scss @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

```scss // 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.