Making your own grid system is also pretty straightforward in Sass. The following example is a Sass @mixin from David Demaree’s article on A List Apart which takes one argument — $span — which will be passed into our @mixin as a variable:

    $column-width: 21em;
    $gutter: 1.5em;

    @mixin grid($span) {
      float: left;
      margin-right: $gutter;
      margin-bottom: $gutter;
      width: ($column-width * $span) + ($gutter * ($span - 1));

And then later that mixin can be used with containers using simple @include:

    header {
      @include grid(3);

    article {
      @include grid(2);

    aside {
      @include grid(1);
      margin-right: 0;

To make this a bit easier to understand, our grid (layout) would now look like this when containers are laid on top of it:

Sass Grid