Semantic alternative to Chris's excellent grid demo at CSS-Tricks : http://css-tricks.com/dont-overthink-it-grids/

grid.less

/*********************************************
	SIMPLE GRID
	
	A very basic semantic Less grid system using padding.

	Based on Chris Coyier's excellent grid demo at CSS-Tricks : http://css-tricks.com/dont-overthink-it-grids/
********************************************/

// Default grid padding, change to override
@gridpad: 2em;

// Set box-sizing: border-box on all elements
*,
:before,
:after {
	.border-box;
}

// Add this to grid containers and nested grid containers
.grid() {
	.group;
}

// Optional mixin  to add padding to parent - can probably remove this and add on per-use basis
.grid-pad() {
	padding: @gridpad;
}

/* Add this to a grid item
	@num: number of columns to cover
	@of: total number of columns
	@pad: padding for column
	@last: padding for last column
	@float: direction to float columns
	.col(3,5) will give a grid item of 60% width
	.col(1,4, )
*/
.col(@num: 1; @of: 1; @pad: @gridpad; @last: 0; @float: left;) {
	float: @float;
	width: percentage( round( (@num/@of), 4 ) );
	padding-right: @pad;
	overflow:hidden;
	.box-sizing(border-box);
	&:last-child, &.last-child {
		padding-right: @last;
	}
}

/* EXPERIMENTAL */

// Testing push and pull grid items. Works only to move grid items, not to move in flow with other grid items
/* Add this to a grid item to move left or right
	@offset: columns to move
	@of: total number of columns
*/
.push(@offset:1; @of:1) {
	margin-left: (@offset/@of)*100%
}
.pull(@offset:1; @of:1) {
	margin-right: (@offset/@of)*100%
}