// -------------------------------------------------------------
// 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: '.grid_container',
    $row-selector: '.grid_base_12',
    $row-extend-selectors: '%grid_row',
    $column-selector-prefix: '.grid_col_',
    $column-extend-selectors: '%grid_col',
    $output-column-styles-for: 1 3 4 6 12
);

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

%grid_row{
    @include clearfix;
}

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

.grid_container{
    @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_base_12{
        height: 100%;
    }
    .grid_col_1{
        @extend %grid_col;
        @include span-columns( $columns: 1, $grid-name: 'demo-grid' );
        background: none;
    }
}

        

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

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

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

.grid_base_12 .grid_col_1, .grid_base_12 .grid_col_3, .grid_base_12 .grid_col_4, .grid_base_12 .grid_col_6, .grid_base_12 .grid_col_12, .overlay_grid .grid_col_1 {
  margin-left: 1.78%;
  margin-right: 1.78%;
}

.grid_base_12 .grid_col_1, .overlay_grid .grid_col_1 {
  width: 4.76%;
}

.grid_base_12 .grid_col_3 {
  width: 21.42%;
}

.grid_base_12 .grid_col_4 {
  width: 29.76%;
}

.grid_base_12 .grid_col_6 {
  width: 46.42%;
}

.grid_base_12 .grid_col_12 {
  width: 96.42%;
}

/* IE6 fix: fixes double margin on floated elements */
.ie6 .grid_base_12 .grid_col_1, .grid_base_12 .ie6 .grid_col_1, .ie6 .grid_base_12 .grid_col_3, .grid_base_12 .ie6 .grid_col_3, .ie6 .grid_base_12 .grid_col_4, .grid_base_12 .ie6 .grid_col_4, .ie6 .grid_base_12 .grid_col_6, .grid_base_12 .ie6 .grid_col_6, .ie6 .grid_base_12 .grid_col_12, .grid_base_12 .ie6 .grid_col_12, .ie6 .overlay_grid .grid_col_1, .overlay_grid .ie6 .grid_col_1 {
  display: inline;
}

.grid_base_12 .grid_col_1, .grid_base_12 .grid_col_3, .grid_base_12 .grid_col_4, .grid_base_12 .grid_col_6, .grid_base_12 .grid_col_12, .overlay_grid .grid_col_1 {
  float: left;
}
.main .grid_base_12 .grid_col_1, .grid_base_12 .main .grid_col_1, .main .grid_base_12 .grid_col_3, .grid_base_12 .main .grid_col_3, .main .grid_base_12 .grid_col_4, .grid_base_12 .main .grid_col_4, .main .grid_base_12 .grid_col_6, .grid_base_12 .main .grid_col_6, .main .grid_base_12 .grid_col_12, .grid_base_12 .main .grid_col_12, .main .overlay_grid .grid_col_1, .overlay_grid .main .grid_col_1 {
  padding-bottom: 2em;
}

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

/* ------------------------------------------------------------- *
 * Demo styles
 * ------------------------------------------------------------- */
.grid_base_12 .grid_col_1, .grid_base_12 .grid_col_3, .grid_base_12 .grid_col_4, .grid_base_12 .grid_col_6, .grid_base_12 .grid_col_12, .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_base_12 {
  height: 100%;
}
.overlay_grid .grid_col_1 {
  background: none;
}

        

<div class='grid_container'>
    <div class='grid_base_12'>
        <div class='grid_col_12'>
            12
        </div> <!-- /grid_col_12 -->
        <div class='grid_col_6'>
            6
        </div> <!-- /grid_col_6 -->
        <div class='grid_col_6'>
            6
        </div> <!-- /grid_col_6 -->
        <div class='grid_col_4'>
            4
        </div> <!-- /grid_col_4 -->
        <div class='grid_col_4'>
            4
        </div> <!-- /grid_col_4 -->
        <div class='grid_col_4'>
            4
        </div> <!-- /grid_col_4 -->
        <div class='grid_col_3'>
            3
        </div> <!-- /grid_col_3 -->
        <div class='grid_col_3'>
            3
        </div> <!-- /grid_col_3 -->
        <div class='grid_col_3'>
            3
        </div> <!-- /grid_col_3 -->
        <div class='grid_col_3'>
            3
        </div> <!-- /grid_col_3 -->
    </div> <!-- /grid_base_12 -->
</div> <!-- /grid_container -->
        

12
6
6
4
4
4
3
3
3
3