grid.html

    <div class="cf w">
      <div class="grid w">
        <i class="column column-1"><i class="gutter"></i></i>
        <i class="column column-2"><i class="gutter"></i></i>
        <i class="column column-3"><i class="gutter"></i></i>
        <i class="column column-4"><i class="gutter"></i></i>
        <i class="column column-5"><i class="gutter"></i></i>
        <i class="column column-6"><i class="gutter"></i></i>
        <i class="column column-7"><i class="gutter"></i></i>
        <i class="column column-8"><i class="gutter"></i></i>
        <i class="column column-9"><i class="gutter"></i></i>
        <i class="column column-10"><i class="gutter"></i></i>
        <i class="column column-11"><i class="gutter"></i></i>
        <i class="column column-12"><i class="gutter"></i></i>
     </div>
   </div>

grid.scss

.grid {
  pointer-events: none;
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0.1;
  @include clearfix;

  .column {
    height: 100%;
    float: left;
    border-left: 1px dotted red;
    border-right: 1px dotted red;
    @include span( 1, 12 );

    .gutter{
      width: 1.875rem;
      float: right;
      position: relative;
      right: -1.875rem;
      background-color: fade-out( red, 0.75 );
      height: 100%;
    }

    &-12{
      margin-right: 0;
      .gutter{ display: none; }
    }
  }
}