Cacher is the code snippet organizer for pro developers

<div class="container">
  <h1>Page heading</h1>
  <div class="testing">
    <h2>Testing block</h2>
  </div>
  <div class="testing2">
    <h2>Testing block</h2>
  </div>
</div>

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-image: -webkit-linear-gradient( left , rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 93.89313%, transparent 93.89313%);
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 93.89313%, transparent 93.89313%);
  background-size: 12.59615%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
  border: 1px dashed red;
}

.container:after {
  content: " ";
  display: block;
  clear: both;
}

.testing {
  width: 37.01923%;
  float: left;
  margin-right: 0.76923%;
  border: 1px dashed red;
}

.testing2 {
  width: 62.21154%;
  float: right;
  margin-right: 0;
  border: 1px dashed red;
}

.testing3 {
  width: 24.42308%;
  float: left;
  margin-right: 0.76923%;
  margin-left: 74.80769%;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .testing3 {
    width: 49.61538%;
    float: left;
    margin-right: 0.76923%;
    margin-left: 37.01923%;
  }
}

// ----
// libsass (v3.3.2)
// ----

// http://bourbon.io/docs/
@import "bourbon/bourbon";
// http://include-media.com/
@import "include-media";
// http://susydocs.oddbird.net/en/latest/install/#quick-start
// http://www.sitepoint.com/sass-grids-neat-susy/
// http://susy.oddbird.net/demos/
// http://www.smashingmagazine.com/2015/07/smarter-grids-with-sass-and-susy/
@import "susy";

// ----------------------------------------------
// Globals
// ----------------------------------------------


$susy: (
  //math: static,
  columns: 8, 
  //column-width: 124px,
  //container: 1024px,
  gutters: 8px/123px,
  //gutter-width: 8px,
  //gutter-position:split,
  global-box-sizing: content-box,
  debug: (
    image: show-columns
  ),
  use-custom: (
    rem: true
  )
);
  

  
$breakpoints: (
  phone: 320px, 
  tablet: 768px, 
  desktop: 1024px
  );

// ----------------------------------------------
// Usage
// ----------------------------------------------
@mixin debuglayout($color: red){
  border: 1px dashed $color;
}

// Déclarer le modèle de boites *
@include global-box-sizing(content-box);


.container {
  @include container();
  //padding: 0 1em;
  @include debuglayout();
}
.testing {
  @include span(3);
  @include debuglayout();
}

.testing2 {
  @include span(5 last);
  //margin-left: span(4);
  @include debuglayout();
}

.testing3 {
  @include span(2);
  margin-left: span(6);
  @include media('>tablet','<=desktop') {
    @include span(4); 
    margin-left: span(3);
  }
}

<div class="container">
  <h1>Page heading</h1>
  <div class="testing">
    <h2>Testing block</h2>
  </div>
  <div class="testing2">
    <h2>Testing block</h2>
  </div>
</div>