<div class="container">
<div class="clear grid4">Grid 4</div>
<div class="grid4">Grid 4</div>
<div class="grid4">Grid 4</div>
</div>
// Set Grid (1170gs default)
$column-width: 70px;
$gutter: 30px;
$columns: 12;
$padding: $gutter / 2;

// 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;
}

// 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 pixels
		$grid: ($grid / $width) * 100%;

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

		.grid#{$i}
			{
			width: $grid;
			float: left;
			margin-left:$gutter-percentage;
			}
	}
	@else
	{
		$grid: $grid;
		.grid#{$i}
			{
			width: $grid;
			float: left;
			margin-left:$gutter;
			}
	}
}

.clear
{
margin-left: 0px;
clear: left;
}

.container
{
  & .grid4 {background: #CCCCCC;}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.