<div class="grid">
  <div class="col-2-3">
     66.66%
  </div>
  <div class="col-1-3">
     33.33%
  </div>
</div>

<div class="grid">
  <div class="col-1-3">
     33%
  </div>
  <div class="col-1-3">
     33%
  </div>
  <div class="col-1-3">
     33%
  </div>
</div>

<div class="grid">
  <div class="col-1-2">
     50%
  </div>
  <div class="col-1-2">
     50%
  </div>
</div>

<div class="grid">
  <div class="col-1-4">
     25%
  </div>
  <div class="col-1-4">
     25%
  </div>
  <div class="col-1-4">
     25%
  </div>
  <div class="col-1-4">
     25%
  </div>
</div>

@import "compass/css3";

* {
  @include box-sizing(border-box);
}
    
$pad: 20px;

.grid {
  background: white;
  margin: 0 0 $pad 0;
  
  &:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }
}

[class*='col-'] {
  float: left;
  padding-right: $pad;
  .grid &:last-of-type {
    padding-right: 0;
  }
}
.col-2-3 {
  width: 66.66%;
}
.col-1-3 {
  width: 33.33%;
}
.col-1-2 {
  width: 50%;
}
.col-1-4 {
  width: 25%;
}
.col-1-8 {
  width: 12.5%;
}

/* Opt-in outside padding */
.grid-pad {
  padding: $pad 0 $pad $pad;
  [class*='col-']:last-of-type {
    padding-right: $pad;
  }
}

$(document).ready(function(){
  
  $('[class*="col-"]').each(function(){

    // Add child div
    $(this).append('<div style="background:silver">');
    var $child = $(this).children('div');

    // Get window width
    var windowWidth = $(window).width();

    // Get child div actual width
    var childWidth = $child.width();

    // Insert child div percentage width
    $child.text(childWidth/windowWidth*100);

  });
  
});