Edit on
<div class="content container">
  <div class="col">
    <p>Hello, I'm Column 1</p>
  </div>
  <div class="col">
    <p>Hello, I'm Column 2</p>
  </div>
  <div class="col">
    <p>Hello, I'm Column 3</p>
  </div>
</div>
<div class="content2 container">
  <div class="col">
    <p>Hello, I'm Column 1</p>
  </div>
  <div class="col">
    <p>Hello, I'm Column 2</p>
  </div>
  <div class="col">
    <p>Hello, I'm Column 3</p>
  </div>
  <div class="col">
    <p>Hello, I'm Column 4</p>
  </div>
</div>
View Compiled
// This Mixin produces even-width flexible columns. Just pass the # of columns, and the gutter width. Call the mixin within the parent container.

// Additional characteristics of .col can be scoped through the parent container.

// use border-box
*, *:before, *:after {
  	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

// The mixin
@mixin evenWidthColumns($columnCount,$gutterWidth) {
	  .col {
       // calculate width based on count and gutter width
    		width: unquote((100 - ($gutterWidth * ($columnCount - 1))) / $columnCount + '%');
    		margin-right: unquote($gutterWidth + '%');
      // use nth-child to eliminate right-margin for last column
      &:nth-child(#{$columnCount}n + #{$columnCount}) {
			      margin-right: 0;
    		}
  	}
}

// all columns will float left
.col { float: left; }

// clearing and centering for all containers
.container:before, .container:after {
    content: " ";
    display: table;
}
.container:after {
    clear: both;
}
.container {
    margin: 0 auto;
}

// example 1
.content {
  width: 100%; // could be any width
  padding: 60px; // could be any padding
  background: #2d2d2d; //could be any background
  margin-bottom: 20px; // could be any margins
  // calling the mixin
  @include evenWidthColumns(3, 10);
  // any other unique styles for columns, just add here
  .col {
    background: orange;
    text-align: center;
  }
}

// example 2
.content2 {
  width: 100%;
  padding: 10px;
  background: #000;
  @include evenWidthColumns(4, 10);
  .col {
    background: #ccc;
    padding: 5px;
  }
}

View Compiled
Rerun