Математическая помощь с моей сеткой :n-й -ребенок (an+b)

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

  
  








This row has only one child.







This row has two children




This is the second child








This row has three children





So this is col 2 of 3




And this is col 3 of 3.








The first child of this row is empty so spanned with the second




This is the second column







This is the first column





The second and third column are spanned

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

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

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

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

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

обновление

30dot предоставил ответ, который сделал CSS намного меньше. Эта скрипка является усовершенствованной версией, предложенной им.

Любые другие предложения по-прежнему приветствуются. Моей сетке с 12 столбцами все еще требуется 30 КБ для охвата.