<div id="grid">
  <div class="content">
    <header>Grid System</header>
    <div class="wrap">
      <div class="block col-12">col-12</div>
    </div>
    <div class="wrap">
      <div class="block col-3">col-3</div>
      <div class="block col-9">col-9</div>
    </div>
    <div class="wrap">
      <div class="block col-4">col-4</div>
      <div class="block col-8">col-8</div>
    </div>
    <div class="wrap">
      <div class="block col-6">col-6</div>
      <div class="block col-6">col-6</div>
    </div>
    <div class="wrap">
      <div class="block col-4">col-4</div>
      <div class="block col-6">col-6</div>
      <div class="block col-2">col-2</div>
    </div>
    <div class="wrap">
      <div class="block col-3">col-3</div>
      <div class="block col-3">col-3</div>
      <div class="block col-3">col-3</div>
      <div class="block col-3">col-3</div>
    </div>
    <div class="wrap">
      <div class="block col-1">col-1</div>
      <div class="block col-3">col-3</div>
      <div class="block col-6">col-6</div>
      <div class="block col-1">col-1</div>
      <div class="block col-1">col-1</div>
    </div>
  </div>

  <div class="content gutless">
    <header>Gutless Grid System</header>
    <div class="wrap">
      <div class="block col-12-gutless">col-12-gutless</div>
    </div>
    <div class="wrap">
      <div class="block col-3-gutless">col-3-gutless</div>
      <div class="block col-9-gutless">col-9-gutless</div>
    </div>
    <div class="wrap">
      <div class="block col-4-gutless">col-4-gutless</div>
      <div class="block col-8-gutless">col-8-gutless</div>
    </div>
    <div class="wrap">
      <div class="block col-6-gutless">col-6-gutless</div>
      <div class="block col-6-gutless">col-6-gutless</div>
    </div>
    <div class="wrap">
      <div class="block col-4-gutless">col-4-gutless</div>
      <div class="block col-6-gutless">col-6-gutless</div>
      <div class="block col-2-gutless">col-2-gutless</div>
    </div>
    <div class="wrap">
      <div class="block col-3-gutless">col-3-gutless</div>
      <div class="block col-3-gutless">col-3-gutless</div>
      <div class="block col-3-gutless">col-3-gutless</div>
      <div class="block col-3-gutless">col-3-gutless</div>
    </div>
    <div class="wrap">
      <div class="block col-1-gutless">col-1-gutless</div>
      <div class="block col-3-gutless">col-3-gutless</div>
      <div class="block col-6-gutless">col-6-gutless</div>
      <div class="block col-1-gutless">col-1-gutless</div>
      <div class="block col-1-gutless">col-1-gutless</div>
    </div>
  </div>
  
  <div class="content">
    <header>Grid System with Offset</header>
    <div class="wrap">
      <div class="block col-12">col-12</div>
    </div>
    <div class="wrap">
      <div class="block col-3 col-2-offset">col-3 col-2-offset</div>
      <div class="block col-7">col-7</div>
    </div>
    <div class="wrap">
      <div class="block col-4">col-4</div>
      <div class="block col-4 col-4-offset">col-4 col-4-offset</div>
    </div>
    <div class="wrap">
      <div class="block col-4-offset-alone">col-4-offset-alone</div>
    </div>
    <div class="wrap">
      <div class="block col-12">col-12</div>
    </div>
  </div>
  
  <div class="content gutless">
    <header>Gutless Grid System with Offset</header>
    <div class="wrap">
      <div class="block col-12-gutless">col-12-gutless</div>
    </div>
    <div class="wrap">
      <div class="block col-3-gutless col-2-offset-gutless">col-3-gutless col-2-offset-gutless</div>
      <div class="block col-7-gutless">col-7-gutless</div>
    </div>
    <div class="wrap">
      <div class="block col-4-gutless">col-4-gutless</div>
      <div class="block col-4-gutless col-4-offset-gutless">col-4-gutless col-4-offset-gutless</div>
    </div>
    <div class="wrap">
      <div class="block col-4-gutless col-4-offset-gutless">col-4-gutless col-4-offset-gutless</div>
    </div>
    <div class="wrap">
      <div class="block col-12-gutless">col-12-gutless</div>
    </div>
  </div>
</div>

/*SASS GUTLESS GRID V1.0
/ Author: Yann Isabel
/ Description: SASS Grid with mixin to make Grid with Gutter and without Gutter (I like to call it Gutless). Offset is also available for both grid style.
/ Download on Github : https://github.com/yannisabel/sass-gutless-grid
*/

/*_______GRID METHOD_________*/
// total of column = 12
// gutter width = 1%
// Column width calculation :
// width : (100% + $gutter-width) / ($total-col / $i) - $gutter-width

/*_______GUTLESS GRID METHOD_________*/
// just ignore gutter width and it gives:
// width: ( 100% / ($total-col / $i) )
// You can change the style of the grid (with gutter or gutless) with the second argument of the grid mixin => grid($i, $gutter:false)

/*_________OFFSET METHOD__________*/
// Same as Grid Method but for a margin-left calcul.
// margin-left:(100% + $gutter-width) / ($total-col / $i) !important;
// Offset is also available for Gutless grid with the second argument of the offset mixin =>  offset($i, $gutter:false)

/*_______Include mixins_______*/
// Include mixins in a loop like this : @for $i from 1 through $total-col
// This loop increments the column number from 1 to the total of column you have chosen. Default is 12 columns. You can change the total-col variable and SASS will calculate for you.

// .col-#{$i} { @include grid($i, true); }
// .col-#{$i}-gutless { @include grid($i, false); }
// .col-#{$i}-offset { @include offset($i, true); }
// .col-#{$i}-offset-gutless { @include offset($i, false);}

$blue: #264b68;
$darkBlue: #212228;
$fontColor: rgba(255,255,255,.3);

/*_____________________ BREAKPOINTS_______________________*/
// Inspired by Hugo Giraudel Post => https://www.sitepoint.com/managing-responsive-breakpoints-sass/
// Maybe a range breakpoint method like Foundation will be better with a mapping variables. Maybe later

// Small screen
$break-small: 'max-width:767px';
// Medium screen
$break-medium: 'min-width:768px';
// large screen
$break-large: 'min-width:960px';
// Extra large screen
$break-wide: 'min-width:1200px';
  
@mixin respond-to($breakpoint) {
  @if $breakpoint == "small" {
    @media (#{$break-small}) {
      @content;
    }
  }
  @else if $breakpoint == "medium" {
    @media (#{$break-medium}) {
      @content;
    }
  }
  @else if $breakpoint == "large" {
    @media (#{$break-large}) {
      @content;
    }
  }
  @else if $breakpoint == "wide" {
    @media (#{$break-wide}) {
      @content;
    }
  }
}
/*__________________AUTOPREFIXER FOR ALL PROPERTIES__________________*/
@mixin cross-browser($properties, $css) {
    -webkit-#{$properties}: $css;
    -moz-#{$properties}: $css;
    #{$properties}: $css; 
}
/*__________________________THE GRID_________________________________*/
/*_______grid variables_______*/
$total-col: 12;
$gutter-width:1%;

/*_______Grid Mixin_________*/
@mixin grid($i, $gutter:false) {
  // with gutter
  @if $gutter {
    width:(100% + $gutter-width) / ($total-col / $i) - $gutter-width;
  }
  // without gutter
  @else{
    width: ( 100% / ($total-col / $i) );
  }
}
/*_______Grid Offset Mixin________*/
@mixin offset($i, $gutter:false) {
  // with gutter
  @if $gutter {
    margin-left:(100% + $gutter-width) / ($total-col / $i) !important;
  }
  // without gutter
  @else {
    margin-left:100% / ($total-col / $i) !important;
  }
}
/*______Include the mixins in a loop________*/
@for $i from 1 through $total-col {
  // simple grid with gutter
  .col-#{$i} { @include grid($i, true); }
  // simple grid without gutter
  .col-#{$i}-gutless { @include grid($i, false); }
  // offset system
  .col-#{$i}-offset {
    @include offset($i, true);
    // Deal with the first child. Add the margin-left
    &:first-child{
      @extend .col-#{$i}-offset;
    }
    // Deal with the last child. Add gutter-width to margin-left
    &:last-child{
        margin-left: (100% + $gutter-width) / ($total-col / $i) + $gutter-width !important;
    }
  }
  // If the block is alone.
  .col-#{$i}-offset-alone {
    margin-left: 100% / ($total-col / $i) + (($gutter-width * $i) / $total-col) !important;
    &:first-child{
      @extend .col-#{$i};
      @extend .col-#{$i}-offset-alone;
    }
  }
  // offset system without gutter 
  .col-#{$i}-offset-gutless {
    @include offset($i, false);
    &:first-child{
      @extend .col-#{$i}-offset-gutless;
    }
    // Deal with the last child. remove gutter of the calcul
    &:last-child{
        margin-left: 100% / ($total-col / $i) !important;
    }
  }
}
// general properties for selector with class that contains 'col-'
[class*='col-'] {
  float: left;
  margin-left: $gutter-width;
  margin-bottom:$gutter-width;
  border:1px solid $blue;
  &:first-child {
    margin-left: 0;
  }
}
// general properties for selector with class that contains '-gutless'
[class*='-gutless'] {
  margin-left: 0;
  margin-bottom:0;
  &:first-child {
    margin-left: 0;
  }
}

/*____________________START STYLING____________________*/
body {
  margin: 0;
  padding: 0;
  font-family:sans-serif;
  @include cross-browser(box-sizing, border-box);
}
#grid{
  padding:1rem 2rem;
  .content{
    width:100%;
    header{
      margin-bottom:$gutter-width;
      padding:0.3rem;
      background:$blue;
      font-family:sans-serif;
      font-size:36px;
      color:$fontColor;
      text-align:center;
    }
    &.gutless{
      margin-bottom:$gutter-width;
    }
    .wrap {
      overflow:hidden;
    }
  }
}

.block{
  height:3.5rem;
  @include cross-browser(box-sizing, border-box);
  background:$darkBlue;
  text-align:center;
  line-height: 3.5rem;
  color:$fontColor;
}
/*__________Include Breakpoint Mixins__________*/
@include respond-to(small) {
  .block{
    width:100%;
    margin-left:0;
  }
  // general properties for selector with class that contains 'offset'
  [class*='offset'] {
    margin-left: 0;
    width:100%;
    &:first-child, &:last-child {
      margin-left: 0 !important;
    }
  }
  // general properties for selector with class that contains 'offset-alone' 
  [class*='offset-alone'] {
    width:100% !important;
  }
} // end small screen
@include respond-to(medium) {
} // end medium screen
@include respond-to(large) {} //end large screen
@include respond-to(wide) {} //end wide screen