My take on a 12 colum grid in css. The columns in this grid have a percentual width, but the gutter has a pixel width. This way the grid should work in a container of any width. It uses CSS calc().

scaffolding.less

// SCAFFOLDING

// Define gutter width
@gutter: 20px;

// Some mixins

// For clearing floats like a boss h5bp.com/q
.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.setSpan(@span) {
	@total_margin_width: ceil(((12 / @span) - 1) * @gutter);
	@span_margin_width: @total_margin_width / (12 / @span);
	@span_percentage: 100% * (@span / 12);
	width: @span_percentage;
	width: ~"-webkit-calc(@{span_percentage} - @{span_margin_width})";
	width: ~"-moz-calc(@{span_percentage} - @{span_margin_width})";
	width: ~"calc(@{span_percentage} - @{span_margin_width})";
}

// The classes

.row {
	.clearfix(); // Gives the row the height of the content, allthough it floats
}

.content {
	.center-block();
	width: @content_width;
}

[class*="span"] {
    min-height: 1px;
    margin-right: @gutter;
    &:last-of-type {
    	margin-right: 0;
    }
    display: block;
    float: left;
}

.span1 {
	.setSpan(1);
}

.span2 {
	.setSpan(2);
}

.span3 {
	.setSpan(3);
}

.span4 {
	.setSpan(4);
}

.span5 {
	.setSpan(5);
}

.span6 {
	.setSpan(6);
}

.span7 {
	.setSpan(7);
}

.span8 {
	.setSpan(8);
}

.span9 {
	.setSpan(9);
}

.span10 {
	.setSpan(10);
}

.span11 {
	.setSpan(11);
}

.span12 {
	.setSpan(12);
}

ꞈexample.html

<div class="conten">
	<div class="row">
		<div class="span3"></div>
		<div class="span4"></div>
		<div class="span3"></div>
		<div class="span2"></div>
	</div>
</div>