Математическая помощь с моей сеткой: nth-child (a + b)

Я пытаюсь создать сетку, которая не зависит от заданного количества столбцов. Я создал небольшой образец, чтобы показать ситуацию:

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Grid in HTML5 and CSS3</title>
<style>

* {margin:0;padding:0;}
.row {display:block;position:relative;clear:both;}
.row>* {display:block;position:relative;clear:both;float:left;clear:none;width:100%;}
.row>*:empty {width:0px;}

/* one column in the row */
.row>:nth-last-child(1):nth-child(1) {width:100%;} 

/* two columns in the row */
.row>:nth-last-child(2):nth-child(1) {width:50%;} 
.row>:nth-last-child(1):nth-child(2) {width:50%;} 

/* three columns in the row */
.row>:nth-last-child(3):nth-child(1) {width:33.33%;} 
.row>:nth-last-child(2):nth-child(2) {width:33.33%;}
.row>:nth-last-child(1):nth-child(3) {width:33.34%;} 
.row>:empty:nth-last-child(3):nth-child(1)+:not(:empty) {width:66.66%;} 
.row>:empty:nth-last-child(2):nth-child(2)+:not(:empty) {width:66.67%;}

article {margin:.5em;border:1px solid green;border-radius:.3em;padding:.5em; }
</style>

</head>
<body>

<section class="row">
<div>
<article>
<p>This row has only one child.</p>
</article>
</div>
</section>

<section class="row">
<div>
<article>
<p>This row has two children</p>
</article>
</div>
<div>
<article>
<p>This is the second child</p>
</article>
</div>
</section>

<section class="row">
<div>
<article>
<p>
This row has three children
</p>
</article>
</div>
<div>
<article>
<p>So this is col 2 of 3</p>
</article>
</div>
<div>
<article>
<p>And this is col 3 of 3.</p>
</article>
</div>
</section>

<section class="row">
<div></div>
<div>
<article>
<p>The first child of this row is empty so spanned with the second</p>
</article>
</div>
<div>
<article>
<p>This is the second column</p>
</article>
</div>
</section>

<section class="row">
<div>
<article>
<p>This is the first column</p>
</article>
</div>
<div></div>
<div>
<article>
<p>The second and third column are spanned</p>
</article>
</div>
</section>

</body>
</html>

Я поставил более крупный образец - более подробно описывая проблемы - на jsfiddle на

http://jsfiddle.net/jordenvanforeest/MDv32/

Теперь моя проблема заключается в том, что если вы хотите, чтобы эта сетка размещалась для более чем трех столбцов, размер CSS становится большим по экспоненте. Поэтому я ищу другое решение. Я попытался сделать что-то вроде

.row>:nth-last-child(an+b):nth-child(cn+d) {}

но мои навыки исчисления немного ржавые, и я не могу заставить его работать правильно. Помощь будет высоко оценена.

Обновление

thirtydot предоставил ответ, который сделал CSS намного меньше. Этот fiddle - это улучшенная версия, предложенная им.

Любые другие предложения по-прежнему приветствуются. Моя 12-столбечная решетка по-прежнему нуждается в 30K для охвата.

Ответ 1