Generated by SassMeister.com.

SassMeister-input-HTML.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>

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>