/**
 * Grid requirements
 *
 * 1. Grid must be fluid so it adjusts on every viewport's content width
 * 2. Grid must be able to float items on multiple lines, e.g. 4 items on one or 2 lines (2 items each)
 * 3. Grid should be applicable as HTML classes and/or mixins
 * 4. You should be able to set up responsive grid layouts
 *    e.g. different amount of columns in different viewports (see requirement 2)
 * 
 * 
 * Grid specs
 * 
 * 1. We use percentage widths and spacings to cover requirement 1
 * 2. We use a negative margin row with all left margin cols to cover requirement 2
 * 3. The grid can be set up completely in HTML by using the given classes: .row, .layout-responsive-x, .col, .col-span-x, .offset-x, etc.
 *    Or you can apply the same styles in LESS by using the mixins: .row(), .layout-responsive-x(), .col(), .col-span(x), .offset(x), etc.
 * 4. To build a responsive grid use .layout-responsive classes on your grid .rows and declare the .cols inside those layouts.
 *    Use .col-x instead of .col-span-x as logical unit inside such a layout if columns have different sizes
 * 
 * NEW
 * Use .ordered, .pull-x and .push-x to optically reposition elements while keeping the html order!
 * credit for this goes to twitter bootstrap
 *
 *
 * Hint: since everything gets calculated within mixins you could even use float numbers for grid widths ;)
 * .col-span(3.5)
 **/

/*--- base variables ---*/
@grid-fixed-width: 960px;
@grid-fixed-gutter: 20px;
@grid-max-cols: 12;

/*-- set up fluid grid ---*/
@grid-fluid-width: 100%;
@decimal-places: 3;
// used for rounding calculated numbers

// fluid gutter is calculated relatively to the static gutter in fixed grid width
@grid-fluid-gutter: round(percentage((100 / (@grid-fixed-width / @grid-fixed-gutter)) / 100), @decimal-places);

// calculate the width of one grid column
@grid-one-col: (@grid-fluid-width - (@grid-fluid-gutter * (@grid-max-cols))) / @grid-max-cols;

/*--- mixins ---*/
#grid {
	.span-width(@num: @grid-max-cols) {
		width: round((@grid-one-col * @num) + (@grid-fluid-gutter * (@num - 1)), @decimal-places);
	}

	.indent(@num: 0) when (@num >= 0) {
		margin-left: round((@grid-one-col * @num) + (@grid-fluid-gutter * (@num + 1)), @decimal-places);
	}

	.indent(@num: -1) when (@num < 0) {
		margin-left: round((@grid-one-col * @num) + (@grid-fluid-gutter * (@num - 1)), @decimal-places);
	}

	.push(@num) when (@num >= 0) {
		position: relative;
		left: round((@grid-one-col * @num) + (@grid-fluid-gutter * @num), @decimal-places);
	}

	.pull(@num) when (@num >= 0) {
		position: relative;
		right: round((@grid-one-col * @num) + (@grid-fluid-gutter * @num), @decimal-places);
	}

	// less loop
	.loop (@index, @class: item, @mixin: '') when (@index > 0) {
		// create the actual css selector
		.@{class}-@{index} {
			#loopMixin > .apply(@mixin, @index);
		}

		// next iteration
		.loop(@index - 1, @class, @mixin);
	}

	// end the loop when index is 0
	.loop (@index) when (@index = 0) {
	}
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/

.clearfix {
	/*
	* For IE 6/7 only
	* Include this rule to trigger hasLayout and contain floats.
	*/
	*zoom: 1;

	&:before,
	&:after {
		content: " "; /* 1 */
		display: table; /* 2 */
	}

	&:after {
		clear: both;
	}
}

/*--- base layout styles ---*/
.row,
.col {
	display: block;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

.row {
	.clearfix();
	margin-left: -@grid-fluid-gutter;

	&.ordered {
		position: relative;
	}
}

.col {
	margin-left: @grid-fluid-gutter;
	float: left;

	&.spacer {
		min-height: 1px;
	}
}

// make simpler mixins available (mainly for class/mixin name consistency)
.col-span(@num: 0) when (@num >= 0) {
	#grid > .span-width(@num);
}

.offset(@num: 0) {
	#grid > .indent(@num);
}

.push(@num: 0) when (@num >= 0) {
	#grid > .push(@num);
}

.pull(@num: 0) when (@num >= 0) {
	#grid > .pull(@num);
}

/*--- generate grid classes ---*/
/**
 * Parameters:
 * 1) amount of iterations
 * 2) class selector prefix to generate
 * 3) mixin to apply to each selector
 *
 * Example:
 * .loop(12, item, 'setTabIndex');
 *
 * NOTE: you can not use the generated classes themselves as mixins!
 */

.row {
	#grid > .loop(@grid-max-cols, col-span, 'grid-span');
	#grid > .loop(@grid-max-cols - 1, offset, 'grid-offset');
	#grid > .loop(@grid-max-cols - 1, push, 'grid-push');
	#grid > .loop(@grid-max-cols - 1, pull, 'grid-pull');
}

// mixins to call inside less loop
#loopMixin {
	// base grid loops
	.apply('grid-span', @index) {
		#grid > .span-width(@index);
	}

	.apply('grid-offset', @index) {
		#grid > .indent(@index);
	}

	.apply('grid-push', @index) {
		#grid > .push(@index);
	}

	.apply('grid-pull', @index) {
		#grid > .pull(@index);
	}
	// grid loops end
}

/**
 * Grid requirements
 *
 * 1. Grid must be fluid so it adjusts on every viewport's content width
 * 2. Grid must be able to float items on multiple lines, e.g. 4 items on one or 2 lines (2 items each)
 * 3. Grid should be applicable as HTML classes and/or mixins
 * 4. You should be able to set up responsive grid layouts
 *    e.g. different amount of columns in different viewports (see requirement 2)
 * 
 * 
 * Grid specs
 * 
 * 1. We use percentage widths and spacings to cover requirement 1
 * 2. We use a negative margin row with all left margin cols to cover requirement 2
 * 3. The grid can be set up completely in HTML by using the given classes: .row, .layout-responsive-x, .col, .col-span-xx, .offset-x
 *    Or you can apply the same styles in LESS by using the mixins: .row(), .layout-responsive-x(), .col(), #grid > .span-width(xx), #grid > .indent(x)
 * 4. To build a responsive grid use the .layout-responsive classes on your grid .rows and declare the .cols inside those layouts.
 *    Use .col-xx instead of .col-span-xx as logical unit inside such a layout if columns have different sizes
 * 
 **/

/*--- base variables ---*/
@gridFixedWidth: 960px;
@fixedGutter: 20px;
@gridMaxCols: 12;

/*-- set up fluid grid ---*/
@gridFluidWidth: 100%;
@decimalPlaces: 3;
// used for rounding calculated numbers

// fluid gutter is calculated relatively to the static gutter in fixed grid width
@fluidGutter: round(percentage((100 / (@gridFixedWidth / @fixedGutter)) / 100), @decimalPlaces);
@oneCol: (@gridFluidWidth - (@fluidGutter * (@gridMaxCols))) / @gridMaxCols;

/*--- mixins ---*/
#grid {
	.span-width(@num: @gridMaxCols) {
		width: round((@oneCol * @num) + (@fluidGutter * (@num - 1)), @decimalPlaces);
	}

	.indent(@num: 0) when (@num > 0) {
		margin-left: round((@oneCol * @num) + (@fluidGutter * (@num + 1)), @decimalPlaces);
	}

	.indent(@num: 0) when (@num < 0) {
		margin-left: round((@oneCol * @num) + (@fluidGutter * (@num - 1)), @decimalPlaces);
	}
}

/*--- base layout styles ---*/
.row {
	.cf(); // clearfix
	margin: 0 0 0 -@fluidGutter;
	padding: 0;
}

.col {
	display: block;
	margin: 0 0 0 @fluidGutter;
	padding: 0;
	float: left;
}

/*--- generate grid classes ---*/
/**
 * .loop() and loop mixins in helpers.less
 * 
 * Parameters:
 * 1) amount of iterations
 * 2) class selector prefix to generate
 * 3) mixin to apply to each selector
 *
 * Example:
 * .loop(12, item, 'setTabIndex');
 *
 * NOTE: you can not use the generated classes themselves as mixins!
 */

.row {
	.loop(@gridMaxCols, col-span, 'gridSpan');
	.loop(@gridMaxCols - 1, offset, 'gridOffset');
}

/**
 * set up responsive grid layouts
 * use/extend these or simply keep the normal grid
 * if no responsiveness is needed
 * e.g. columns are the same on every viewport
 *
 * apply these classes to your grid .rows
 *
 * some example responsive setups:
 **/

.layout-responsive-1 {
	/**
	 * tablet landscape & desktop: 3 columns per line
	 * tablet portrait: 2 columns per line
	 * phone: 1 column per line
	 **/
	@media @desktop {
		& > .col {
			#grid > .span-width(@gridMaxCols/3);
		}
	}
	@media @tablet {
		& > .col {
			#grid > .span-width(@gridMaxCols/2);
		}
	}
	@media @phone {
		& > .col {
			#grid > .span-width(@gridMaxCols);
		}
	}
}

.layout-responsive-2 {
	/**
	 * tablet and up: 2 columns per line
	 * phone: 1 column per line
	 **/
	@media @tabletAndUp {
		& > .col {
			#grid > .span-width(@gridMaxCols/2);
		}
	}
	@media @phone {
		& > .col {
			#grid > .span-width(@gridMaxCols);
		}
	}
}

.layout-responsive-3 {
	/**
	 * tablet and up: one column takes 2/3, the other 1/3
	 * phone: both columns take the whole width
	 *
	 * note the naming col-x instead of col-span-x
	 * which indicates a logical unit inside this layout
	 * rather than a specific column width
	 **/
	@media @tabletAndUp {
		& > .col-1 {
			#grid > .span-width(@gridMaxCols/3);
		}

		& > .col-2 {
			#grid > .span-width(@gridMaxCols/3*2);
		}
	}
	@media @phone {
		& > .col {
			#grid > .span-width(@gridMaxCols);
		}
	}
}

/**
 * Grid requirements
 *
 * 1. Grid must be fluid so it adjusts on every viewport's content width
 * 2. Grid must be able to float items on multiple lines, e.g. 4 items on one or 2 lines (2 items each)
 * 3. Grid should be applicable as HTML classes and/or mixins
 * 4. You should be able to set up responsive grid layouts
 *    e.g. different amount of columns in different viewports (see requirement 2)
 * 
 * 
 * Grid specs
 * 
 * 1. We use percentage widths and spacings to cover requirement 1
 * 2. We use a negative margin row with all left margin cols to cover requirement 2
 * 3. The grid can be set up completely in HTML by using the given classes: .row, .layout-responsive-x, .col, .col-span-xx, .offset-x
 *    Or you can apply the same styles in LESS by using the mixins: .row(), .layout-responsive-x(), .col(), #grid > .span-width(xx), #grid > .indent(x)
 * 4. To build a responsive grid use the .layout-responsive classes on your grid .rows and declare the .cols inside those layouts.
 *    Use .col-xx instead of .col-span-xx as logical unit inside such a layout if columns have different sizes
 * 
 **/

/*--- base variables ---*/
@gridFixedWidth: @contentMaxWidth;
@fixedGutter: @hSpacing;
@gridMaxCols: 12;

/*-- set up fluid grid ---*/
@gridFluidWidth: 100%;
@decimalPlaces: 3;
// used for rounding calculated numbers

// fluid gutter is calculated relatively to the static gutter in fixed grid width
@fluidGutter: round(percentage((100 / (@gridFixedWidth / @fixedGutter)) / 100), @decimalPlaces);
@oneCol: (@gridFluidWidth - (@fluidGutter * (@gridMaxCols))) / @gridMaxCols;

/*--- mixins ---*/
#grid {
	.span-width(@num: @gridMaxCols) {
		width: round((@oneCol * @num) + (@fluidGutter * (@num - 1)), @decimalPlaces);
	}

	.indent(@num: 0) when (@num > 0) {
		margin-left: round((@oneCol * @num) + (@fluidGutter * (@num + 1)), @decimalPlaces);
	}

	.indent(@num: 0) when (@num < 0) {
		margin-left: round((@oneCol * @num) + (@fluidGutter * (@num - 1)), @decimalPlaces);
	}
}

/*--- base layout styles ---*/
.row {
	.cf(); // clearfix
	margin: 0 0 0 -@fluidGutter;
	padding: 0;
}

.col {
	display: block;
	margin: 0 0 0 @fluidGutter;
	padding: 0;
	float: left;
}

/*--- generate grid classes ---*/
/**
 * .loop() and loop mixins in helpers.less
 * 
 * Parameters:
 * 1) amount of iterations
 * 2) class selector prefix to generate
 * 3) mixin to apply to each selector
 *
 * Example:
 * .loop(12, item, 'setTabIndex');
 *
 * NOTE: you can not use the generated classes themselves as mixins!
 */

.row {
	.loop(@gridMaxCols, col-span, 'gridSpan');
	.loop(@gridMaxCols - 1, offset, 'gridOffset');
}

/**
 * set up responsive grid layouts
 * use/extend these or simply keep the normal grid
 * if no responsiveness is needed
 * e.g. columns are the same on every viewport
 *
 * apply these classes to your grid .rows
 *
 * some example responsive setups:
 **/

.layout-responsive-1 {
	/**
	 * tablet landscape & desktop: 3 columns per line
	 * tablet portrait: 2 columns per line
	 * phone: 1 column per line
	 **/
	@media @desktop {
		& > .col {
			#grid > .span-width(@gridMaxCols/3);
		}
	}
	@media @tablet {
		& > .col {
			#grid > .span-width(@gridMaxCols/2);
		}
	}
	@media @phone {
		& > .col {
			#grid > .span-width(@gridMaxCols);
		}
	}
}

.layout-responsive-2 {
	/**
	 * tablet and up: 2 columns per line
	 * phone: 1 column per line
	 **/
	@media @tabletAndUp {
		& > .col {
			#grid > .span-width(@gridMaxCols/2);
		}
	}
	@media @phone {
		& > .col {
			#grid > .span-width(@gridMaxCols);
		}
	}
}

.layout-responsive-3 {
	/**
	 * tablet and up: one column takes 2/3, the other 1/3
	 * phone: both columns take the whole width
	 *
	 * note the naming col-x instead of col-span-x
	 * which indicates a logical unit inside this layout
	 * rather than a specific column width
	 **/
	@media @tabletAndUp {
		& > .col-1 {
			#grid > .span-width(@gridMaxCols/3);
		}

		& > .col-2 {
			#grid > .span-width(@gridMaxCols/3*2);
		}
	}
	@media @phone {
		& > .col {
			#grid > .span-width(@gridMaxCols);
		}
	}
}

A simple to use yet very flexible fluid grid with less.

See an example list of [responsive grid layouts](http://snipplr.com/view/73096/example-responsive-grid-layouts-for-responsibly/)

Responsibly - Responsive fluid grid with LESS

CSS