Compass compatible Sass port of columnal grid system
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Columnal Grid System - Compass Plugin

Columnal is a responsive CSS grid system helping desktop and mobile browsers play nicely together. See the official site for more info:

  • This plugin is consistent with latest version of Columnal as of 10/01/2012

This plugin adds the Columnal Grid System framework to Compass. This plugin is heavly based upon the compass plugin written by Chris Eppstein and Matt Sanders. I've tried to use the same mixin names whenever possible to make a migration easier.


First add to your Gemfile:

gem "compass-columnal-plugin"

Then run:

bundle install

Add a config/compass.rb file to your project containing:

require 'columnal'

Finally, in your stylesheet:

@import columnal/grid

Class-Based Grid System

To create a grid system that works like the original Columnal Grid System framework use the +grid-system-complete mixin to generate the corresponding classes:



Making Semantic Grids

Let's say we have a 12 columns layout, and we want to use the <section> tag as a row in the grid:


So we could use the following HTML:

    <header>This header has 12 columns</header>
    <article>Here we have 9 columns</article>
    <aside>And here 3</aside>

Handling horizontal margins and paddings

Every +grid(n) column comes with a margin-right as default gutter between columns. But we don't want this margin on the last column because it'll break our layout. For that, we use:


Or, for the one's too damn used to


Adding some "blank" (padding-left, actually) columns before your grid column:


Adding some "blank" (padding-right, actually) columns after your grid column:


Using subcolumns

Columnal allows you to use subcolumns that will flatten to a single column on mobile devices, the same way as the normal columns. One thing to note is that sub-columns will only work up to one level deep. More at

        +grid-subcolumn(9, 6)
        +grid-subcolumn(9, 3)

This will divide your article into two subcolumns, one of them with 6 columns and the other with 3.

IMPORTANT: since Columnal is a responsive grid system based on percentage, we can't know beforehand how many columns the parent article has. Thus, the first parameter will be the number of columns of the parent.

Creating mobile-only or mobile-hidden content

If you want something to be shown only in mobile devices:


If you want something to be hidden in mobile devices:


Configuring your grid

Defining the grid width:

$columnal-grid-width: 1140px !default

Defining the number of columns:

$columnal-columns: 12 !default

Defining the separator for classes on class-based grids:

$columnal-class-separator: "_" !default


Basic settings to make type look nice: