Generated by SassMeister.com.

SassMeister-input-HTML.jade

mixin item
  .item
    img(src="http://placehold.it/400x150/eee/?text=img")
    h3.headline An item headline
    p.description A sentence or two of descriptive copy

mixin item2
  .item
    img(src="http://placehold.it/400x150/eee/?text=img")
    h3.headline A headline that is longer than the other
    p.description What happens if the box is taller than others around it? Everything should clear appropriately.

mixin item3
  .item
    h3.headline Short Headline
    p.description This text is very short.
  
mixin item4
  .item
    h3.headline A headline that is longer than the other
    p.description What happens if the box is taller than others around it? Everything should clear appropriately.

  
.wrapper
  .main
    .item-row.halves
      +item2
      +item
    .item-row.thirds
      +item
      +item2
      +item
    .item-row.quarters
      +item4
      +item3
      +item4
      +item3
  .rail
    +item
    +item3
    +item4

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// Bourbon (v4.2.3)
// Neat (v1.6.0)
// ----

@import "bourbon/bourbon";


@import "neat/neat";

$breakpoint-small: 1200;
$breakpoint-medium: 1400;
$breakpoint-large: 1600;

$grid-columns: 14;
//$gutter: 40px;
$column: percentage(100 / $grid-columns * 0.6);
$gutter: percentage(100 / ($grid-columns - 1) * 0.4);
//$gutter: percentage(1440px/40px);
//$max-width: 100%;
$content-width: 1280px;
$max-width: 1440px;
$visual-grid: false;
$visual-grid-color: #FC0D9F;
$visual-grid-index: front;
$visual-grid-opacity: 0.1;

// Define your breakpoints
$medium: new-breakpoint(max-width $breakpoint-medium+'px' 11);
$small: new-breakpoint(max-width $breakpoint-small+'px' 6);

@import "neat/neat";

// I overwrote the default span-columns mixin to trim some of the repetition -
// just removed the float: left and display: block.
// no need to set those over and over again.
// That said, this will all work with the built-in version of this mixin.
@mixin span-columns($span: $columns of $container-columns, $display: block) {
  $columns: nth($span, 1);
  $container-columns: container-span($span);

  $parent-columns: get-parent-columns($container-columns) !global;

  $direction: get-direction($layout-direction, $default-layout-direction);
  $opposite-direction: get-opposite-direction($direction);

  $display-table: is-display-table($container-display-table, $display);

  @if $display-table  {
    display: table-cell;
    width: percentage($columns / $container-columns);
  } @else {

    @if $display == collapse {
      @include -neat-warn("The 'collapse' argument will be deprecated. Use 'block-collapse' instead.");
    }

    @if $display == collapse or $display == block-collapse {
      width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);

      &:last-child {
        width: flex-grid($columns, $container-columns);
      }

    } @else {
      margin-#{$direction}: flex-gutter($container-columns);
      width: flex-grid($columns, $container-columns);

      &:last-child {
        margin-#{$direction}: 0;
      }
    }
  }
}


div, li {  min-height: 100px; }
img { width: 100%; height: auto; opacity: 0.5; }

//.wrapper { background: papayawhip; }
//.main { background: skyblue; }
//.rail { background: salmon; }
//.item { background: transparentize(white, 0.5); }


.main,
.rail,
.item { 
  float: left; 
  //&:hover { outline: 1px dotted gray; }
}

.wrapper {
  @include outer-container();
}

.main {
  @include span-columns(9);
  @include shift(1);
}

.rail {
  @include span-columns(3);
  @include omega;
}

.item-row,
.rail .item {
  @include clearfix;
}

.item { 
  margin-bottom: 40px;
  
  .quarters & { 
    @include span-columns(2.25 of 9); 
    @include omega(4n);
    }
  .thirds & { 
    @include span-columns(3 of 9); 
    @include omega(3n);
  }
  .halves & { 
    @include span-columns(4.5 of 9); 
    @include omega(2n);
  }
  .rail & {
    float: none;
    border-bottom: 1px dotted gray;
    padding-bottom: 20px;
    margin-bottom: 20px;
    &:last-of-type {
      border-bottom: none;
    }
  }
}

@include media($medium) {
  $grid-columns: 11;
  $column: percentage(100 / $grid-columns * 0.6);
  $gutter: percentage(100 / ($grid-columns - 1) * 0.4);

  .wrapper { @include outer-container(); }
  .main { @include span-columns(6); }
  .rail { @include span-columns(3); }
  .item {
    margin-bottom: 30px;
    .quarters &,
    .halves & { 
      @include span-columns(3 of 6); 
      @include omega(2n);
      }
    .thirds & { @include span-columns(2 of 6); }
  }
}

@include media($small) {
  .main,
  .rail,
  .item {
    @include shift(0);
    @include fill-parent();
  }
  .item {
    margin-bottom: 20px;
    
    .thirds &,
    .halves &,
    .quarters & {
      @include span-columns(1 of 1);
    }
  }
}

SassMeister-output.css

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

div, li {
  min-height: 100px; }

img {
  width: 100%;
  height: auto;
  opacity: 0.5; }

.main,
.rail,
.item {
  float: left; }

.wrapper {
  *zoom: 1;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto; }
  .wrapper:before, .wrapper:after {
    content: " ";
    display: table; }
  .wrapper:after {
    clear: both; }

.main {
  margin-right: 3.07692%;
  width: 63.18681%;
  margin-left: 7.36264%; }
  .main:last-child {
    margin-right: 0; }

.rail {
  margin-right: 3.07692%;
  width: 19.01099%;
  margin-right: 0; }
  .rail:last-child {
    margin-right: 0; }

.item-row,
.rail .item {
  *zoom: 1; }
  .item-row:before, .item-row:after,
  .rail .item:before,
  .rail .item:after {
    content: " ";
    display: table; }
  .item-row:after,
  .rail .item:after {
    clear: both; }

.item {
  margin-bottom: 40px; }
  .quarters .item {
    margin-right: 4.86957%;
    width: 21.34783%; }
    .quarters .item:last-child {
      margin-right: 0; }
    .quarters .item:nth-child(4n) {
      margin-right: 0; }
    .quarters .item:nth-child(4n+1) {
      clear: left; }
  .thirds .item {
    margin-right: 4.86957%;
    width: 30.08696%; }
    .thirds .item:last-child {
      margin-right: 0; }
    .thirds .item:nth-child(3n) {
      margin-right: 0; }
    .thirds .item:nth-child(3n+1) {
      clear: left; }
  .halves .item {
    margin-right: 4.86957%;
    width: 47.56522%; }
    .halves .item:last-child {
      margin-right: 0; }
    .halves .item:nth-child(2n) {
      margin-right: 0; }
    .halves .item:nth-child(2n+1) {
      clear: left; }
  .rail .item {
    float: none;
    border-bottom: 1px dotted gray;
    padding-bottom: 20px;
    margin-bottom: 20px; }
    .rail .item:last-of-type {
      border-bottom: none; }

@media screen and (max-width: 1400px) {
  .wrapper {
    *zoom: 1;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto; }
    .wrapper:before, .wrapper:after {
      content: " ";
      display: table; }
    .wrapper:after {
      clear: both; }

  .main {
    margin-right: 3.94922%;
    width: 52.75035%; }
    .main:last-child {
      margin-right: 0; }

  .rail {
    margin-right: 3.94922%;
    width: 24.40056%; }
    .rail:last-child {
      margin-right: 0; }

  .item {
    margin-bottom: 30px; }
    .quarters .item, .halves .item {
      margin-right: 7.48663%;
      width: 46.25668%; }
      .quarters .item:last-child, .halves .item:last-child {
        margin-right: 0; }
      .quarters .item:nth-child(2n), .halves .item:nth-child(2n) {
        margin-right: 0; }
      .quarters .item:nth-child(2n+1), .halves .item:nth-child(2n+1) {
        clear: left; }
    .thirds .item {
      margin-right: 7.48663%;
      width: 28.34225%; }
      .thirds .item:last-child {
        margin-right: 0; } }
@media screen and (max-width: 1200px) {
  .main,
  .rail,
  .item {
    margin-left: 0%;
    width: 100%; }

  .item {
    margin-bottom: 20px; }
    .thirds .item, .halves .item, .quarters .item {
      margin-right: 71.79487%;
      width: 100%; }
      .thirds .item:last-child, .halves .item:last-child, .quarters .item:last-child {
        margin-right: 0; } }

SassMeister-rendered.html

<div class="wrapper">
  <div class="main">
    <div class="item-row halves">
      <div class="item"><img src="http://placehold.it/400x150/eee/?text=img"/>
        <h3 class="headline">A headline that is longer than the other</h3>
        <p class="description">What happens if the box is taller than others around it? Everything should clear appropriately.</p>
      </div>
      <div class="item"><img src="http://placehold.it/400x150/eee/?text=img"/>
        <h3 class="headline">An item headline</h3>
        <p class="description">A sentence or two of descriptive copy</p>
      </div>
    </div>
    <div class="item-row thirds">
      <div class="item"><img src="http://placehold.it/400x150/eee/?text=img"/>
        <h3 class="headline">An item headline</h3>
        <p class="description">A sentence or two of descriptive copy</p>
      </div>
      <div class="item"><img src="http://placehold.it/400x150/eee/?text=img"/>
        <h3 class="headline">A headline that is longer than the other</h3>
        <p class="description">What happens if the box is taller than others around it? Everything should clear appropriately.</p>
      </div>
      <div class="item"><img src="http://placehold.it/400x150/eee/?text=img"/>
        <h3 class="headline">An item headline</h3>
        <p class="description">A sentence or two of descriptive copy</p>
      </div>
    </div>
    <div class="item-row quarters">
      <div class="item">
        <h3 class="headline">A headline that is longer than the other</h3>
        <p class="description">What happens if the box is taller than others around it? Everything should clear appropriately.</p>
      </div>
      <div class="item">
        <h3 class="headline">Short Headline</h3>
        <p class="description">This text is very short.</p>
      </div>
      <div class="item">
        <h3 class="headline">A headline that is longer than the other</h3>
        <p class="description">What happens if the box is taller than others around it? Everything should clear appropriately.</p>
      </div>
      <div class="item">
        <h3 class="headline">Short Headline</h3>
        <p class="description">This text is very short.</p>
      </div>
    </div>
  </div>
  <div class="rail">
    <div class="item"><img src="http://placehold.it/400x150/eee/?text=img"/>
      <h3 class="headline">An item headline</h3>
      <p class="description">A sentence or two of descriptive copy</p>
    </div>
    <div class="item">
      <h3 class="headline">Short Headline</h3>
      <p class="description">This text is very short.</p>
    </div>
    <div class="item">
      <h3 class="headline">A headline that is longer than the other</h3>
      <p class="description">What happens if the box is taller than others around it? Everything should clear appropriately.</p>
    </div>
  </div>
</div>