<div class="container">
  <div class="clear grid4 xlrg-clear xlrg1 lrg-clear lrg6 med-full sml-full">Grid 4</div>
  <div class="grid4 xlrg1 lrg6 med-clear med6 sml-full">Grid 4</div>
  <div class="grid4 xlrg10 lrg-clear lrg-full med6 sml-full">Grid 4</div>
</div>
// Set Grid (1170gs default)
$column-width: 70px;
$gutter: 30px;
$columns: 12;
$padding: $gutter / 2;

// Define Media Query Breakpoints
$bp-xlrg: 1280px;
$bp-lrg: 924px;
$bp-med: 640px;
$bp-sml: 480px;

// Should it be responsive?
$responsive: true;

// Set container width relative to user variables
$width: ($column-width * $columns) + ($gutter * ($columns - 1));

// Set Base Container
.container
{
// Set container width if responsive
@if $responsive == true
{
	max-width:$width;
}
@else
{
	width:$width;
}
margin:0px auto;
position:relative;
padding: 0 $padding 0 $padding;
}

// Create Grid Mixin to save us from having to clone the code over and over
@mixin create_grid($prefix)
{

// Define Individual Grid Classes
@for $i from 1 to $columns
{
	// Calculate grid size in pixels
	$grid: ($column-width * $i) + ($gutter * ($i - 1));
	
	// Calculate responsive grid sizes if required
	@if $responsive == true
	{
		// Calculate grid size in percentage
		$grid: ($grid / $width) * 100%;

		// Get Gutter Percentage for Grids
		$gutter-percentage: ($gutter / $width) * 100%;

		.#{$prefix}#{$i}
			{
			width: $grid;
			float: left;
			clear:none;
			margin-left:$gutter-percentage;
			}

	}
	@else
	{
		.grid#{$i}
			{
			width: $grid;
			float: left;
			margin-left:$gutter;
			}
	}
}
  
  // Define Additional Full Width Variants & Clear Classes For Responsive Classes Only
@if $prefix != "grid"
{		
	.#{$prefix}-full
	{	
	width:100%;
	float:none;
	margin-left:0;
	}

	.#{$prefix}-clear
	{
	margin-left: 0px;
	clear: left;
	}
}
@else
{
	.clear
	{
	margin-left: 0px;
	clear: left;
	}
}

}

// Generate Grid Classes
@include create_grid("grid");

// Generate additional responsive classes. We only want these to be created if we've stated we want it to be responsive
@if $responsive == true
{
	@media screen and (max-width: $bp-xlrg)
	{
		@include create_grid("xlrg");
	}

	@media screen and (max-width: $bp-lrg)
	{
		@include create_grid("lrg");
	}

	@media screen and (max-width: $bp-med)
	{
	   @include create_grid("med");
	}

	@media screen and (max-width: $bp-sml)
	{
	   @include create_grid("sml");
	}
}

.container div
{
  background:#cccccc;
  margin-bottom:10px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.