KNACSS/css/grids.css

/* ----------------------------- */
/* ==grids                       */
/* ----------------------------- */

/* equal grids with 2% gutter */
[class^=grid]:after {
	content: "";
	display: table;
	clear: both;
}
[class^=grid] > * {float: left; } /* direct childrens are floating */
[class^=grid] > * + * { margin-left: 2%; } /* here's the gutter */
.grid2 > * { width: 49%; }
.grid3 > * { width: 32%; }
.grid4 > * { width: 23.5%; }
.grid5 > * { width: 18.4%; }
.grid6 > * { width: 15%; }

/* unequal grids (1-2, 2-1, 1-3 and 3-1) with 2% gutter */
.grid2-1 > *:first-child,
.grid1-2 > * + * { width: 66%; }
.grid1-2 > *:first-child,
.grid2-1 > * + * { width: 32%; }
.grid1-3 > *:first-child,
.grid3-1 > * + * { width: 23.5%; }
.grid3-1 > *:first-child,
.grid1-3 > * + * { width: 74.5%; }

/* ----------------------------- */
/* ==autogrids                  */
/* ----------------------------- */

/* auto-justified equal grids */

[class*="autogrid"] {
	text-align: justify;
	font-size: 1px; letter-spacing: -1px; /* whitespace fi xpart 1 */
}
[class*="autogrid"]:after {
	content: "";
	display: inline-block;
	width: 100%; 
}
[class*="autogrid"] > * {
	display: inline-block;
	vertical-align: top;
	text-align: left;
	font-size: 14em; font-size: 1.4rem; letter-spacing: normal; /* whitespace fix part 2 */
	*display: inline; *zoom: 1; /* ie6 / ie7 hack */
}
.autogrid2 > * {width: 49%}
.autogrid3 > * {width: 32%}
.autogrid4 > * {width: 23.6%}
.autogrid5 > * {width: 19%}
.autogrid6 > * {width: 15%}
.autogrid8 > * {width: 10.8%}
.autogrid10 > * {width: 9%}
.autogrid12 > * {width: 6.4%}

/* Responsiv-o-matic */

@media (max-width: 1024px) {
	.autogrid5 > *,
	.autogrid6 > *,
	.autogrid8 > *,
	.autogrid10 > *,
	.autogrid12 > * {width: 32%}
}
@media (max-width: 768px) {
	.autogrid3 > *,
	.autogrid4 > *,
	.autogrid5 > *,
	.autogrid6 > *,
	.autogrid8 > *,
	.autogrid10 > *,
	.autogrid12 > * {width: 49%}
}
@media (max-width: 640px) {
	[class*="autogrid"] > * {width: 100%}
}