Cacher is the code snippet organizer for pro developers

<div class="container">
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-6">
  <div class="grid-1">content</div>
  <div class="grid-1">content</div>
</div>
<div class="grid-6">
  <div class="grid-1">content</div>
</div>
</div>

div[class^="grid-"] {
  background-color: #ccc;
  margin-bottom: 1em;
  min-height: 3em;
  box-sizing: border-box;
}

.container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.container:after {
  content: " ";
  display: block;
  clear: both;
}

.grid-1 {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 8.33333%;
  float: left;
  padding-left: 0.83333%;
  padding-right: 0.83333%;
}

.grid-half, .grid-6 {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
  float: left;
  padding-left: 0.83333%;
  padding-right: 0.83333%;
}

// ----
// Sass (v3.4.5)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Susy (v2.1.3)
// ----

@import "breakpoint";
@import "susy";
//vars
$mobile: (max-width:30em);
//visualisation
div[class^="grid-"]{
  background-color:#ccc;
  margin-bottom:1em;
  min-height:3em;
  box-sizing:border-box;
}

//grids thingy
$total-columns:12;
//context
$susy:(columns:$total-columns, gutter-position:inside);
.container {
  @include container(960px);
  @include layout($susy);
}

%grid-full {
  @include span(1 12 no-gutter);
}
//normal grid 
//expand to 100% when under 30em screen width
.grid-1 {
  @include span(1 of $total-columns);
 
}
.grid-half, .grid-6 {
  @include span(6 of $total-columns);
 
}

<div class="container">
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-1">
  <div class="content">gridcontent</div>
</div>
<div class="grid-6">
  <div class="grid-1">content</div>
  <div class="grid-1">content</div>
</div>
<div class="grid-6">
  <div class="grid-1">content</div>
</div>
</div>