Generated by SassMeister.com.

SassMeister-input-HTML.jade

.page
  .wrapper
    .main
      .module.four
        .section-header Main/Four
        .item
        .item
        .item
        .item
      .module.three
        .section-header Main/Three
        .item
        .item
        .item
        .item
        .item
        .item
      .module.two
        .section-header Main/Two
        .item
        .item
        .item
        .item
    .rail
      .module
        .section-header Rail 1
        .item
        .item
        .item
      .module
        .section-header Rail 2
        .item
        .item
        .item
    .full
      .module.four
        .section-header Full/Four
        .item
        .item
        .item
        .item
      .module.three
        .section-header Full/Three
        .item
        .item
        .item
        .item
        .item
        .item

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import "susy";

$susy: (
columns: 14,
gutters: .6,
math: fluid,
global-box-sizing: border-box,
container: 1440px,
debug: (
  color: transparentize(white, 0.5)
  )
);

$space-unit: 20px;
$row-space: 2*$space-unit;
$module-space: 4*$space-unit;

* {
  box-sizing: border-box;
}

.item { min-height: 140px; }
.rail .item { min-height: 100px; }
.section-header { 
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.5em;
  margin-bottom: 2*$space-unit;
}

.wrapper {
  @include layout($susy);
  @include container;
  .main, .rail { @include span(1 of 14); }
  .main { width: span(9 of 14); @include push(1 of 14); }
  .rail { width: span(3); }
  .full { width: span(12 of 14); @include push(1 of 14); }
}

.item {
  margin-bottom: $row-space;
  background: #eee;
  
  .main & { @include span(1 of 9); }
  .four & { width: span(9/4 of 9); }
  .three & { width: span(3 of 9); }
  .two & { width: span(9/2 of 9); }
  .rail & { width: span(3 of 3); }
  
  .full & { @include span(1 of 12); }
  .full .four & { width: span(3 of 12); }
  .full .three & { width: span(4 of 12); }
}

.module {
  @include break;
  padding: ($module-space - $row-space/2) 0;
  
  .rail & { padding-bottom: 0; }
}

%last { @include last; }
.four :nth-child(4n),
.three :nth-child(3n),
.two :nth-child(2n) { @include last;}


.rail {
  .item {
      position: relative;
    &:after { 
      content: "";
      display: block;
      width: 100%;
      position: absolute;
      bottom: -1*$space-unit;
      border-bottom: 1px dotted #ccc;
      }
   &:last-child:after { display: none; }
  }
}


@include susy-breakpoint(max-width 1300px, 11) {
  
  .wrapper {
    @include layout(11);
    padding: 0 5%;
  }
}

@include susy-breakpoint(max-width 1000px, 9) {
  
  @include layout(9);
  
  .wrapper {
    @include layout(9);
    
    .main,
    .rail,
    .full {
      @include full();
    }
  }
  
  .item {
    .rail & { 
      @include span(3 of 9); 
      &:nth-child(3n) { @include last; }
      &:after { display: none; }
      }
      
      .four & {
        @include span(4.5 of 9);
        &:nth-child(2n) { @include last; }
      }
  }
  
}

SassMeister-output.css

* {
  box-sizing: border-box;
}

.item {
  min-height: 140px;
}

.rail .item {
  min-height: 100px;
}

.section-header {
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.5em;
  margin-bottom: 40px;
}

.wrapper {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

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

.wrapper .main, .wrapper .rail {
  width: 4.58716%;
  float: left;
  margin-right: 2.75229%;
}

.wrapper .main {
  width: 63.30275%;
  margin-left: 7.33945%;
}

.wrapper .rail {
  width: 19.26606%;
}

.wrapper .full {
  width: 85.3211%;
  margin-left: 7.33945%;
}

.item {
  margin-bottom: 40px;
  background: #eee;
}

.main .item {
  width: 7.24638%;
  float: left;
  margin-right: 4.34783%;
}

.four .item {
  width: 21.73913%;
}

.three .item {
  width: 30.43478%;
}

.two .item {
  width: 47.82609%;
}

.rail .item {
  width: 100%;
}

.full .item {
  width: 5.37634%;
  float: left;
  margin-right: 3.22581%;
}

.full .four .item {
  width: 22.58065%;
}

.full .three .item {
  width: 31.1828%;
}

.module {
  clear: both;
  padding: 60px 0;
}

.rail .module {
  padding-bottom: 0;
}

.four :nth-child(4n),
.three :nth-child(3n),
.two :nth-child(2n) {
  float: right;
  margin-right: 0;
}

.rail .item {
  position: relative;
}

.rail .item:after {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  bottom: -20px;
  border-bottom: 1px dotted #ccc;
}

.rail .item:last-child:after {
  display: none;
}

@media (max-width: 1300px) {
  .wrapper {
    padding: 0 5%;
  }
}

@media (max-width: 1000px) {
  .wrapper .main,
  .wrapper .rail,
  .wrapper .full {
    clear: both;
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0;
  }
  .rail .item {
    width: 30.43478%;
    float: left;
    margin-right: 4.34783%;
  }
  .rail .item:nth-child(3n) {
    float: right;
    margin-right: 0;
  }
  .rail .item:after {
    display: none;
  }
  .four .item {
    width: 47.82609%;
    float: left;
    margin-right: 4.34783%;
  }
  .four .item:nth-child(2n) {
    float: right;
    margin-right: 0;
  }
}

SassMeister-rendered.html

<div class="page">
  <div class="wrapper">
    <div class="main">
      <div class="module four">
        <div class="section-header">Main/Four</div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <div class="module three">
        <div class="section-header">Main/Three</div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <div class="module two">
        <div class="section-header">Main/Two</div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>
    <div class="rail">
      <div class="module">
        <div class="section-header">Rail 1</div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <div class="module">
        <div class="section-header">Rail 2</div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>
    <div class="full">
      <div class="module four">
        <div class="section-header">Full/Four</div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <div class="module three">
        <div class="section-header">Full/Three</div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>
  </div>
</div>