Responsive, Pretty CSS Columns in LESS/SASS

columns.less

/* Media Queries Assume: 1em = 16px */

/* ================================================= */
/* Helpers
/* ================================================= */

.clearfix{*zoom: 1;&:before,&:after{display:table;content:"";}&:after{clear:both;}}

.box-sizing( @boxmodel ) {
	-webkit-box-sizing: @boxmodel;
	   -moz-box-sizing: @boxmodel;
	    -ms-box-sizing: @boxmodel;
	        box-sizing: @boxmodel;
}

/* ================================================= */
/* Columns
/* ================================================= */

@columnGutter : 20px;

.columns{
	list-style: none;
	margin:0;
	padding:0;
	width:100%;

	.clearfix();

	img,
	input,
	select,
	textarea{
		max-width: 100%;
	}

	& > .column{
		float:left;
		width:100%;

		.box-sizing(border-box);
	}

	&.two > .column,
	&.col-2 > .column{
		&:nth-child(odd){
			clear: left;
		}
	}

	&.three > .column,
	&.col-3 > .column{
		&:nth-child(3n+1){
			clear: left;
		}
	}

	&.four > .column,
	&.col-4 > .column{
		&:nth-child(4n+1){
			clear: left;
		}
	}
}


/* ================================================= */
/* Mobile layout
/* 240–479 px
/* ================================================= */

@media screen and (min-width: 15em) { /** 16px * 15 = 240px **/
	.columns{
		& > .column{
			margin-bottom: @columnGutter;
		}
	}
}


/* ================================================= */
/* Wide mobile layout
/* 480-599 px
/* ================================================= */

@media screen and (min-width: 30em) { /** 16px * 30 = 480px **/

}


/* ================================================= */
/* Tablet layout
/* 600-959 px
/* ================================================= */

@media screen and (min-width: 37.5em) { /** 16px * 37.5 = 600px **/
	.columns{
		& > .column{
			margin-bottom: @columnGutter * 1.5;
		}

		&.two > .column,
		&.col-2 > .column,
		&.four > .column,
		&.col-4 > .column{
			padding-left: 0;
			padding-right: @columnGutter * (1/2);
			width: 50%;

			&:nth-child(even){
				padding-left: @columnGutter * (1/2);
				padding-right: 0;
			}
		}
	}
}


/* ================================================= */
/* Widescreen layout
/* 960-1079 px
/* ================================================= */

@media screen and (min-width: 60em ) { /** 16px * 60 = 960px **/
	.columns{

		&.three > .column,
		&.col-3 > .column{
			padding-left: @columnGutter * (2/3);
			width: 33.3333333333333%;

			&:first-child,
			&:nth-child(3n+1){
				padding-left: 0;
				padding-right: @columnGutter * (2/3);
			}

			&:nth-child(3n+2){
				padding-left: @columnGutter * (1/3);
				padding-right: @columnGutter * (1/3);
			}
		}

		&.four > .column,
		&.col-4 > .column{
			padding-left: @columnGutter * (3/4);
			width: 25%;

			&:first-child,
			&:nth-child(4n+1){
				padding-left: 0;
				padding-right: @columnGutter * (3/4);
			}
			&:nth-child(4n+2){
				padding-left: @columnGutter * (1/4);
				padding-right: @columnGutter * (2/4);
			}
			&:nth-child(4n+3){
				padding-left: @columnGutter * (2/4);
				padding-right: @columnGutter * (1/4);
			}
		}
	}
}

columns.scss

/* Media Queries Assume: 1em = 16px */

/* ================================================= */
/* Helpers
/* ================================================= */

.clearfix{*zoom: 1;&:before,&:after{display:table;content:"";}&:after{clear:both;}}

@mixin box-sizing( $boxmodel ) {
	-webkit-box-sizing: $boxmodel;
	   -moz-box-sizing: $boxmodel;
	    -ms-box-sizing: $boxmodel;
	        box-sizing: $boxmodel;
}

/* ================================================= */
/* Columns
/* ================================================= */

$columnGutter : 20px;

.columns{
	list-style: none;
	margin:0;
	padding:0;
	width:100%;

	@extend .clearfix;

	img,
	input,
	select,
	textarea{
		max-width: 100%;
	}

	& > .column{
		float:left;
		width:100%;

		@include box-sizing(border-box);
	}

	&.two > .column,
	&.col-2 > .column{
		&:nth-child(odd){
			clear: left;
		}
	}

	&.three > .column,
	&.col-3 > .column{
		&:nth-child(3n+1){
			clear: left;
		}
	}

	&.four > .column,
	&.col-4 > .column{
		&:nth-child(4n+1){
			clear: left;
		}
	}
}


/* ================================================= */
/* Mobile layout
/* 240–479 px
/* ================================================= */

@media screen and (min-width: 15em) { /** 16px * 15 = 240px **/
	.columns{
		& > .column{
			margin-bottom: $columnGutter;
		}
	}
}


/* ================================================= */
/* Wide mobile layout
/* 480-599 px
/* ================================================= */

@media screen and (min-width: 30em) { /** 16px * 30 = 480px **/

}


/* ================================================= */
/* Tablet layout
/* 600-959 px
/* ================================================= */

@media screen and (min-width: 37.5em) { /** 16px * 37.5 = 600px **/
	.columns{
		& > .column{
			margin-bottom: $columnGutter * 1.5;
		}

		&.two > .column,
		&.col-2 > .column,
		&.four > .column,
		&.col-4 > .column{
			padding-left: 0;
			padding-right: $columnGutter * (1/2);
			width: 50%;

			&:nth-child(even){
				padding-left: $columnGutter * (1/2);
				padding-right: 0;
			}
		}
	}
}


/* ================================================= */
/* Widescreen layout
/* 960-1079 px
/* ================================================= */

@media screen and (min-width: 60em ) { /** 16px * 60 = 960px **/
	.columns{

		&.three > .column,
		&.col-3 > .column{
			padding-left: $columnGutter * (2/3);
			width: 33.3333333333333%;

			&:first-child,
			&:nth-child(3n+1){
				padding-left: 0;
				padding-right: $columnGutter * (2/3);
			}

			&:nth-child(3n+2){
				padding-left: $columnGutter * (1/3);
				padding-right: $columnGutter * (1/3);
			}
		}

		&.four > .column,
		&.col-4 > .column{
			padding-left: $columnGutter * (3/4);
			width: 25%;

			&:first-child,
			&:nth-child(4n+1){
				padding-left: 0;
				padding-right: $columnGutter * (3/4);
			}
			&:nth-child(4n+2){
				padding-left: $columnGutter * (1/4);
				padding-right: $columnGutter * (2/4);
			}
			&:nth-child(4n+3){
				padding-left: $columnGutter * (2/4);
				padding-right: $columnGutter * (1/4);
			}
		}
	}
}