How to create a Grid system in Sass

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