Yet Another CSS Grid Generator

.grid {
	width: 940px;
	margin: 0 auto;
}
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12 {
	float: left;
	margin-left: 20px;
}
.first {
	margin-left: 0;
	clear: left;
}
.grid1 { width: 60px; }
.grid2 { width: 140px; }
.grid3 { width: 220px; }
.grid4 { width: 300px; }
.grid5 { width: 380px; }
.grid6 { width: 460px; }
.grid7 { width: 540px; }
.grid8 { width: 620px; }
.grid9 { width: 700px; }
.grid10 { width: 780px; }
.grid11 { width: 860px; }
.grid12 { width: 940px; }

<div class="grid">
<div class="grid12 first">
	<p>grid12</p>
</div>
<div class="first grid1"><p>grid1</p></div>
<div class="grid1"><p>grid1</p></div>
<div class="grid1"><p>grid1</p></div>
<div class="grid1"><p>grid1</p></div>
<div class="grid1"><p>grid1</p></div>
<div class="grid1"><p>grid1</p></div>
<div class="grid1"><p>grid1</p></div>
<div class="grid1"><p>grid1</p></div>
<div class="grid1"><p>grid1</p></div>
<div class="grid1"><p>grid1</p></div>
<div class="grid1"><p>grid1</p></div>
<div class="grid1"><p>grid1</p></div>


<!-- half|half -->
<div class="first grid6"><p>grid6</p></div>
<div class="grid6"><p>grid6</p></div>


<!-- third|third|third -->
<div class="first grid4"><p>grid4</p></div>
<div class="grid4"><p>grid4</p></div>
<div class="grid4"><p>grid4</p></div>


<!-- loop -->
<div class="first grid1"><p>grid1</p></div>
<div class="grid11"><p>grid11</p></div>
<div class="clear"></div>
<div class="first grid2"><p>grid2</p></div>
<div class="grid10"><p>grid10</p></div>
<div class="clear"></div>
<div class="first grid3"><p>grid3</p></div>
<div class="grid9"><p>grid9</p></div>
<div class="clear"></div>
<div class="first grid4"><p>grid4</p></div>
<div class="grid8"><p>grid8</p></div>
<div class="clear"></div>
<div class="first grid5"><p>grid5</p></div>
<div class="grid7"><p>grid7</p></div>
<div class="clear"></div>
<div class="first grid6"><p>grid6</p></div>
<div class="grid6"><p>grid6</p></div>
<div class="clear"></div>
<div class="first grid7"><p>grid7</p></div>
<div class="grid5"><p>grid5</p></div>
<div class="clear"></div>
<div class="first grid8"><p>grid8</p></div>
<div class="grid4"><p>grid4</p></div>
<div class="clear"></div>
<div class="first grid9"><p>grid9</p></div>
<div class="grid3"><p>grid3</p></div>
<div class="clear"></div>
<div class="first grid10"><p>grid10</p></div>
<div class="grid2"><p>grid2</p></div>
<div class="clear"></div>
<div class="first grid11"><p>grid11</p></div>
<div class="grid1"><p>grid1</p></div>
<div class="clear"></div>
</div>