Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
executable file 45 lines (34 sloc) 1.18 KB
layout title permalink ctime category
post
How to create a Grid system in Sass
how-to-create-grid-sass
2015-08-04
css

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:

{% highlight scss %}
$column-width: 21em;
$gutter: 1.5em;

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

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

{% highlight scss %}
header {
  @include grid(3);
}

article {
  @include grid(2);
}

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

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

Source