Aide mathématique avec ma grille : nth-child(an+b)

Question

Je essaie de créer une grille qui ne dépend pas d'un nombre prédéterminé de colonnes. J'ai créé un petit exemple pour montrer la situation :

  Grille en HTML5 et CSS3

* {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;}

/* une colonne dans la rangée */
.row>:nth-last-child(1):nth-child(1) {width:100%;} 

/* deux colonnes dans la rangée */
.row>:nth-last-child(2):nth-child(1) {width:50%;} 
.row>:nth-last-child(1):nth-child(2) {width:50%;} 

/* trois colonnes dans la rangée */
.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; }

Cette rangée a seulement un enfant.

Cette rangée a deux enfants

Ceci est le deuxième enfant

Cette rangée a trois enfants

Donc c'est la 2ème de 3

Et c'est la 3ème de 3.

Le premier enfant de cette rangée est vide donc la 2ème est prolongée

Ceci est le deuxième colonne

C'est la première colonne

La deuxième et troisième colonnes sont prolongées

J'ai mis un plus grand exemple - décrivant les problèmes plus en détail - sur jsfiddle à

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

Mon problème maintenant est que si vous voulez que cette grille puisse accueillir plus de 3 colonnes, la taille CSS devient exponentielle. Donc je recherche une autre solution. J'ai essayé de faire quelque chose comme

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

mais mes compétences en calcul sont un peu rouillées et je n'arrive pas à le faire fonctionner correctement. Toute aide serait très appréciée.

mise à jour

thirtydot a fourni une réponse qui a rendu le CSS beaucoup plus petit. Ce fiddle est la version améliorée suggérée par lui.

Toutes autres suggestions sont toujours les bienvenues. Ma grille de 12 colonnes nécessite encore 30K pour le spanning.

Answer 1

Vous pouvez faire quelque chose de similaire avec display: table combiné avec table-layout: fixed.

Support du navigateur : http://caniuse.com/css-table (mais le facteur limitant ici est :not() et :empty)

Voir : http://jsfiddle.net/thirtydot/MDv32/3/

Comme vous pouvez le voir, cela semble pratiquement identique. Avec un peu d'ingéniosité, vous devriez être capable de reproduire la plupart des fonctionnalités de votre démo avec la technique utilisée dans la mienne. J'ai commenté le HTML de ma démo là où j'ai arrêté.

CSS :

.row {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.row > * {
    display: table-cell;
}
.row > :empty {
    display: none;
}
/* par exemple : */
.row > :empty + :not(:empty) + :last-child:not(:empty) {
    width: 33.33%;
}