Custom grid

_grid.scss

// Columns placeholder
%col {
	@include mq($from: tablet) {
		float: left;
		padding-left: $gutter-tablet;
		padding-right: $gutter-tablet;
	}
	@include mq($from: tablet-wide) {
		padding-left: $gutter-tablet-wide;
		padding-right: $gutter-tablet-wide;
	}
}

%last {
	@include mq($from: tablet) {
		float: right;
	}
}

// Row placeholder
%row {
	@extend %clearfix;
	@include mq($from: tablet) {
		margin-left: -$gutter-tablet;
		margin-right: -$gutter-tablet;
	}
	@include mq($from: tablet-wide) {
		margin-left: -$gutter-tablet-wide;
		margin-right: -$gutter-tablet-wide;
	}
}

// Create placeholders in the form of %col-1-5 (a column with 20% width)
@for $i from 1 through $columns {
	@for $j from 1 through $i - 1 {
		@if $j > 0 {
			%col-#{$j}-#{$i} {
				@extend %col;
				@include mq($from: tablet) {
					width: 100% * $j / $i;
					&:nth-child(#{$i}n+1) {
						clear: both;
					}
				}
			}
		}
	}
}

// Create placeholders in the form of %colp-40 (a column with 40% width)
$percentage: 10;

@while $percentage < 100 {
	%colp-#{$percentage} {
		@extend %col;
		@include mq($from: tablet) {
			width: percentage($percentage/100);
		}
	}
	$percentage: $percentage + 10;
}

_variables.scss

/// Number of columns for the grid
/// @type integer
/// @group helpers
$columns: 5 !default;

/// Gutter size
/// @type measure
/// @group helpers
$gutter:             68px !default;
$gutter-tablet-wide: $gutter/2 !default;
$gutter-tablet:      $gutter/4 !default;