mbrowne/grids.css

## grids.css
.grid-row, .col {width:100%;}

/* clearfix (http://nicolasgallagher.com/micro-clearfix-hack) */
.grid-row:before, .grid-row:after {
    content:" "; display:table;
}
.grid-row:after {clear:both;}
/* for IE<=7 */
.grid-row {*zoom: 1;}

.col {
    display:block;
    *zoom:1; /* for IE<=7 */
    min-height:1px;
    float:left;
}

.cell {margin:15px;}

.width-fill,.width-fit {
	display:block;*zoom:1;
}
.width-fill {
    width:10000px;
    *width:auto; /* for IE<=7 */
    display:table-cell;
    float:none;
    _float:left; /* for IE6 */
}
.width-fit {
    width:auto;
    _width:1px; /* for IE6 */
}

.width-1of24{width:4.1666666%;}
.width-1of16{width:6.25%;}
.width-1of12,.width-2of24{width:8.3333333%;}
.width-1of10{width:10%;}
.width-1of9{width:11.1111111%;}
.width-1of8,.width-2of16,.width-3of24{width:12.5%;}
.width-1of7{width:14.2857143%;}
.width-1of6,.width-2of12,.width-4of24{width:16.6666666%;}
.width-3of16{width:18.75%;}
.width-1of5,.width-2of10{width:20%;}
.width-5of24{width:20.8333333%;}
.width-2of9{width:22.2222222%;}
.width-1of4,.width-2of8,.width-3of12,.width-4of16,.width-6of24{width:25%;}
.width-2of7{width:28.5714286%;}
.width-7of24{width:29.1666666%;}
.width-3of10{width:30%;}
.width-5of16{width:31.25%;}
.width-1of3,.width-2of6,.width-3of9,.width-4of12,.width-8of24{width:33.3333333%;}
.width-3of8,.width-6of16,.width-9of24{width:37.5%;}
.width-2of5,.width-4of10{width:40%;}
.width-5of12,.width-10of24{width:41.6666666%;}
.width-3of7{width:42.8571429%;}
.width-7of16{width:43.75%;}
.width-4of9{width:44.4444444%;}
.width-11of24{width:45.8333333%;}
.width-1of2,.width-2of4,.width-3of6,.width-4of8,.width-5of10,.width-6of12,.width-8of16,.width-12of24{width:50%;}
.width-13of24{width:54.1666666%;}
.width-5of9{width:55.5555555%;}
.width-9of16{width:56.25%;}
.width-4of7{width:57.1428572%;}
.width-7of12,.width-14of24{width:58.3333333%;}
.width-3of5,.width-6of10{width:60%;}
.width-5of8,.width-10of16,.width-15of24{width:62.5%;}
.width-2of3,.width-4of6,.width-6of9,.width-8of12,.width-16of24{width:66.6666666%;}
.width-11of16{width:68.75%;}
.width-7of10{width:70%;}
.width-17of24{width:70.8333333%;}
.width-5of7{width:71.4285715%;}
.width-3of4,.width-6of8,.width-9of12,.width-12of16,.width-18of24{width:75%;}
.width-7of9{width:77.7777777%;}
.width-19of24{width:79.1666666%;}
.width-4of5,.width-8of10{width:80%;}
.width-13of16{width:81.25%;}
.width-5of6,.width-10of12,.width-20of24{width:83.3333333%;}
.width-6of7{width:85.7142858%;}
.width-7of8,.width-14of16,.width-21of24{width:87.5%;}
.width-8of9{width:88.8888888%;}
.width-9of10{width:90%;}
.width-11of12,.width-22of24{width:91.6666666%;}
.width-15of16{width:93.75%;}
.width-23of24{width:95.8333333%;}

## grids.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Presentational Grids</title>
<link rel="stylesheet" href="grids.css">
<style>
    .float-left {float:left;}
    .float-right {float:right;}
</style>
</head>
<body>
	<div class="grid-row">
		<div class="col width-1of2"><div class="cell">col width-1of2</div></div>
		<div class="col width-1of2"><div class="cell">col width-1of2</div></div>
	</div>
	<div class="grid-row">
		<div class="col width-1of3"><div class="cell">col width-1of3</div></div>
		<div class="col width-1of3"><div class="cell">col width-1of3</div></div>
		<div class="col width-1of3"><div class="cell">col width-1of3</div></div>
	</div>
	<div class="grid-row">
		<div class="col width-fit"><div class="cell">col width-fit</div></div>
		<div class="col width-fit float-right"><div class="cell">col width-fit float-right</div></div>
		<div class="col width-fill"><div class="cell">col width-fill</div></div>
	</div>
</body>
	.grid-row, .col {width:100%;}

	/* clearfix (http://nicolasgallagher.com/micro-clearfix-hack) */
	.grid-row:before, .grid-row:after {
	content:" "; display:table;
	}
	.grid-row:after {clear:both;}
	/* for IE<=7 */
	.grid-row {*zoom: 1;}

	.col {
	display:block;
	zoom:1; / for IE<=7 */
	min-height:1px;
	float:left;
	}

	.cell {margin:15px;}

	.width-fill,.width-fit {
	display:block;*zoom:1;
	}
	.width-fill {
	width:10000px;
	width:auto; / for IE<=7 */
	display:table-cell;
	float:none;
	_float:left; /* for IE6 */
	}
	.width-fit {
	width:auto;
	_width:1px; /* for IE6 */
	}

	.width-1of24{width:4.1666666%;}
	.width-1of16{width:6.25%;}
	.width-1of12,.width-2of24{width:8.3333333%;}
	.width-1of10{width:10%;}
	.width-1of9{width:11.1111111%;}
	.width-1of8,.width-2of16,.width-3of24{width:12.5%;}
	.width-1of7{width:14.2857143%;}
	.width-1of6,.width-2of12,.width-4of24{width:16.6666666%;}
	.width-3of16{width:18.75%;}
	.width-1of5,.width-2of10{width:20%;}
	.width-5of24{width:20.8333333%;}
	.width-2of9{width:22.2222222%;}
	.width-1of4,.width-2of8,.width-3of12,.width-4of16,.width-6of24{width:25%;}
	.width-2of7{width:28.5714286%;}
	.width-7of24{width:29.1666666%;}
	.width-3of10{width:30%;}
	.width-5of16{width:31.25%;}
	.width-1of3,.width-2of6,.width-3of9,.width-4of12,.width-8of24{width:33.3333333%;}
	.width-3of8,.width-6of16,.width-9of24{width:37.5%;}
	.width-2of5,.width-4of10{width:40%;}
	.width-5of12,.width-10of24{width:41.6666666%;}
	.width-3of7{width:42.8571429%;}
	.width-7of16{width:43.75%;}
	.width-4of9{width:44.4444444%;}
	.width-11of24{width:45.8333333%;}
	.width-1of2,.width-2of4,.width-3of6,.width-4of8,.width-5of10,.width-6of12,.width-8of16,.width-12of24{width:50%;}
	.width-13of24{width:54.1666666%;}
	.width-5of9{width:55.5555555%;}
	.width-9of16{width:56.25%;}
	.width-4of7{width:57.1428572%;}
	.width-7of12,.width-14of24{width:58.3333333%;}
	.width-3of5,.width-6of10{width:60%;}
	.width-5of8,.width-10of16,.width-15of24{width:62.5%;}
	.width-2of3,.width-4of6,.width-6of9,.width-8of12,.width-16of24{width:66.6666666%;}
	.width-11of16{width:68.75%;}
	.width-7of10{width:70%;}
	.width-17of24{width:70.8333333%;}
	.width-5of7{width:71.4285715%;}
	.width-3of4,.width-6of8,.width-9of12,.width-12of16,.width-18of24{width:75%;}
	.width-7of9{width:77.7777777%;}
	.width-19of24{width:79.1666666%;}
	.width-4of5,.width-8of10{width:80%;}
	.width-13of16{width:81.25%;}
	.width-5of6,.width-10of12,.width-20of24{width:83.3333333%;}
	.width-6of7{width:85.7142858%;}
	.width-7of8,.width-14of16,.width-21of24{width:87.5%;}
	.width-8of9{width:88.8888888%;}
	.width-9of10{width:90%;}
	.width-11of12,.width-22of24{width:91.6666666%;}
	.width-15of16{width:93.75%;}
	.width-23of24{width:95.8333333%;}
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<title>Presentational Grids</title>
	<link rel="stylesheet" href="grids.css">
	<style>
	.float-left {float:left;}
	.float-right {float:right;}
	</style>
	</head>
	<body>
	<div class="grid-row">
	<div class="col width-1of2"><div class="cell">col width-1of2</div></div>
	<div class="col width-1of2"><div class="cell">col width-1of2</div></div>
	</div>
	<div class="grid-row">
	<div class="col width-1of3"><div class="cell">col width-1of3</div></div>
	<div class="col width-1of3"><div class="cell">col width-1of3</div></div>
	<div class="col width-1of3"><div class="cell">col width-1of3</div></div>
	</div>
	<div class="grid-row">
	<div class="col width-fit"><div class="cell">col width-fit</div></div>
	<div class="col width-fit float-right"><div class="cell">col width-fit float-right</div></div>
	<div class="col width-fill"><div class="cell">col width-fill</div></div>
	</div>
	</body>