Grixins = Grid Mixins

12
6
6
4
4
4
3
3
3
3
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1
1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1

Nested Rows

6

6
6

6

8
4

How it all works?

Grixins is a pair of Sass mixins, one for making rows and one for making columns. They are very easy to use.

HTML

<section>
  <article></article>
  <figure></figure>
</section>

SASS

section {
  @include row();
}

article {
  @include columns(9);
}

figure {
  @include columns(3);
}

Each mixin has a couple of options but not too many. You can tell rows to nest.

SASS

section {
  @include row();
}

section section {
  @include row(nest);
}

Now sections inside other sections won’t break the grid.

Columns have a few options as well. The first option you pass is the number of columns. If you pass nothing it will default to 12. The second option is the number of columns you would like to offset, if any.

SASS

article {
  @include columns(8,4);
}

This will create an 8-column span that is offset by 4 columns.