// -------------------------------------------------------------
// Importing grid core and clearfix
// --------------------------------

@import '../../externals/sassy-grid/sass/grid-core';
@import '../../externals/sassy-grid/sass/clearfix';

// -------------------------------------------------------------
// Basic grid settings
// -------------------

$degredation-selector: '.no_media_queries';
$ie6-selector: '.ie6';
$grid-debug: false;

// -------------------------------------------------------------
// Defining the grid
// -----------------

@include define-grid-settings(
    $grid-name: 'demo-grid',
    $is-fluid: false,
    $column-width: 40,
    $gutter-width: 30,
    $gutter-property: 'margin',
    $num-columns: 12,
    $padding-left: 80,
    $padding-right: 80
);

// -------------------------------------------------------------
// Applying the grid
// -----------------

@include apply-grid(
    $use-grid: 'demo-grid',
    $container-selector: '.wrapper',
    $row-selector: '.grid',
    $output-column-styles-for: false
);

// -------------------------------------------------------------
// Basic grid styles
// -----------------

.grid{
    @include clearfix;
    .full{
        @extend %grid_col;
        @include span-columns( $columns: 12, $grid-name: 'demo-grid' );
    }
    .half{
        @extend %grid_col;
        @include span-columns( $columns: 6, $grid-name: 'demo-grid' );
    }
    .third{
        @extend %grid_col;
        @include span-columns( $columns: 4, $grid-name: 'demo-grid' );
    }
    .quarter{
        @extend %grid_col;
        @include span-columns( $columns: 3, $grid-name: 'demo-grid' );
    }
}

%grid_col {
    float: left;
    .main &{
        padding-bottom: 2em;
    }
}

.wrapper{
    @include clearfix;
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------- *
 * Demo styles
 * ------------------------------------------------------------- */

%grid_col{
    background: #D8E6FF;
    text-align: center;
    line-height: 40px;
    min-height: 40px;
    margin-bottom: 15px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
}

.overlay_grid{
    .grid,
    .wrapper{
        height: 100%;
    }
    .grid_col_1{
        @extend %grid_col;
        @include span-columns( $columns: 1, $grid-name: 'demo-grid' );
        background: none;
    }
}

        

/* -----------------------------
   Clearfix
   ----------------------------- */
.clearfix, .grid, .wrapper {
  zoom: 1;
}
.clearfix:before, .grid:before, .wrapper:before, .clearfix:after, .grid:after, .wrapper:after {
  content: " ";
  display: table;
}
.clearfix:after, .grid:after, .wrapper:after {
  clear: both;
}

/* -----------------------------
   Sassy Grid mixin
   @author: Frej Raahede Nielsen
   @documentation: http://springload.github.com/sassy-grid/
   ----------------------------- */
.wrapper {
  width: 970px;
}

.grid {
  padding-left: 6.7%;
  padding-right: 6.7%;
}

.grid .full, .grid .half, .grid .third, .grid .quarter, .overlay_grid .grid_col_1 {
  margin-left: 1.78%;
  margin-right: 1.78%;
}

.overlay_grid .grid_col_1 {
  width: 4.76%;
}

.grid .quarter {
  width: 21.42%;
}

.grid .third {
  width: 29.76%;
}

.grid .half {
  width: 46.42%;
}

.grid .full {
  width: 96.42%;
}

/* IE6 fix: fixes double margin on floated elements */
.ie6 .grid .full, .grid .ie6 .full, .ie6 .grid .half, .grid .ie6 .half, .ie6 .grid .third, .grid .ie6 .third, .ie6 .grid .quarter, .grid .ie6 .quarter, .ie6 .overlay_grid .grid_col_1, .overlay_grid .ie6 .grid_col_1 {
  display: inline;
}

.grid .full, .grid .half, .grid .third, .grid .quarter, .overlay_grid .grid_col_1 {
  float: left;
}
.main .grid .full, .grid .main .full, .main .grid .half, .grid .main .half, .main .grid .third, .grid .main .third, .main .grid .quarter, .grid .main .quarter, .main .overlay_grid .grid_col_1, .overlay_grid .main .grid_col_1 {
  padding-bottom: 2em;
}

.wrapper {
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------- *
 * Demo styles
 * ------------------------------------------------------------- */
.grid .full, .grid .half, .grid .third, .grid .quarter, .overlay_grid .grid_col_1 {
  background: #D8E6FF;
  text-align: center;
  line-height: 40px;
  min-height: 40px;
  margin-bottom: 15px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
}

.overlay_grid .grid,
.overlay_grid .wrapper {
  height: 100%;
}
.overlay_grid .grid_col_1 {
  background: none;
}

        

<div class='wrapper'>
    <div class='grid'>
        <div class='full'>
            full
        </div> <!-- /full -->
        <div class='half'>
            half
        </div> <!-- /half -->
        <div class='half'>
            half
        </div> <!-- /half -->
        <div class='third'>
            third
        </div> <!-- /third -->
        <div class='third'>
            third
        </div> <!-- /third -->
        <div class='third'>
            third
        </div> <!-- /third -->
        <div class='quarter'>
            quarter
        </div> <!-- /quarter -->
        <div class='quarter'>
            quarter
        </div> <!-- /quarter -->
        <div class='quarter'>
            quarter
        </div> <!-- /quarter -->
        <div class='quarter'>
            quarter
        </div> <!-- /quarter -->
    </div> <!-- /grid -->
</div> <!-- /wrapper -->
        

full
half
half
third
third
third
quarter
quarter
quarter
quarter