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:

1$column-width: 21em;
2$gutter: 1.5em;
3
4@mixin grid($span) {
5  float: left;
6  margin-right: $gutter;
7  margin-bottom: $gutter;
8  width: ($column-width * $span) + ($gutter * ($span - 1));
9}

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

 1header {
 2  @include grid(3);
 3}
 4
 5article {
 6  @include grid(2);
 7}
 8
 9aside {
10  @include grid(1);
11  margin-right: 0;
12}

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

Source