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: