Generated by SassMeister.com.
<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>