Sass mixin for equal multi-column layout. Include in the parent selector and specify the number of columns, the size of the gap between columns, and the direct children selector. Depends on a clearfix solution for the parent, and assumes you have applied "box-sizing: border-box" at a global level. Example: http://jsfiddle.net/brendanmckeown/gzr8…

equal-grid-columns.scss

@mixin equal-grid-columns($columns, $gap, $el) {
	@include clearfix;
	> #{$el} {
		float: left;
		width: (100% / $columns);
		$halfGap: ($gap / 2);
		padding: 0 $halfGap;
		margin-top: $gap;
		
		@for $i from 1 through $columns {
			// remove top margin from first row
			&:nth-child(#{$i}n) {
				margin-top: 0;
			}
			// remove left padding from first item in row
			// remove right padding from last item in row
			&:nth-child(#{$columns}n + #{$i}){
				@if $i == 1 {
					clear: left;
					padding-left: 0;
				} @else if $i == $columns {
					padding-right: 0;
				}
			}
		}
	}
}