_grid-v1.scss

/*------------------------------------*\
    $DEFAULT STRUCTURE
\*------------------------------------*/

$grid_context: if($container-max-width == none, 1024px, $container-max-width) !default;
$gutter_px: 20px !default;
$max_columns:4 !default;
$gutter: percentage($gutter_px / $grid_context);


[class*='col-'] {
	float: left;
	margin-right: $gutter;
	img {
		max-width: 100%;
	}
}

.grid{
  	// overflow: hidden;
  	@extend .clearfix;
	width: 100%;
	margin: 0 auto pxtoem($gutter_px) auto;
	@if $container-max-width != none {
		max-width: pxtoem($container-max-width);
	}
}
.col-1 {
	@extend %no-margin-right;
	width: 100%;
}
.centered{margin: 0 auto !important; float: none;}
%clear-left {clear:left;}
%no-margin-right { margin-right: 0;}

@for $columns from 1 through $max_columns {
	$column_width: percentage( (($grid_context + $gutter_px) / $columns) / $grid_context );
	@for $numerator from 1 to $columns {
		.col-#{$numerator}-#{$columns} {
			width:  ($numerator * $column_width) - $gutter;
			&:nth-child(#{$columns}n){
				@extend %no-margin-right;
			}
			&:nth-child(#{$columns}n+1){
				@extend %clear-left;
			}
			@if ($numerator != ($columns - $numerator)) {
				& + .col-#{($columns - $numerator)}-#{$columns} {
					@extend %no-margin-right;
				}
			}
		}
		.push-#{$numerator}-#{$columns} {
			margin-left: ($numerator * $column_width);
		}
		.pull-#{$numerator}-#{$columns} {
			margin-right: ($numerator * $column_width);
		}
	}
}

$grid_breakpoints: () !default;

@if length($grid_breakpoints) > 0 {
	@each $break in $grid_breakpoints {
		$break_max_width: nth($break, 1);
		$break_max_columns: nth($break, 2);
		@if $max_columns > $break_max_columns {
		    @media all and (max-width: pxtoem($break_max_width)){

				%mrightauto {margin-right:0;}
				%noclear{clear:none;}

		    	@for $columns from ($break_max_columns + 1) through $max_columns {
					$column_width: percentage( (($grid_context + $gutter_px) / $break_max_columns) / $grid_context );
					@for $numerator from 1 to $columns {
						// @if $numerator < $columns
						.col-#{$numerator}-#{$columns} {
							width:  $column_width - $gutter;
							&:nth-child(#{$columns}n){
								margin-right: $gutter;
							}
							&:nth-child(#{$columns}n+1){
								clear: none;
							}
							&:nth-child(#{$break_max_columns}n){
								margin-right: 0;
							}
							&:nth-child(#{$break_max_columns}n+1){
								clear: left;
							}
						}
					}
				}
		    }
		}
	}
}