Grid CSS et variation du nombre de collones

Bonjour,
Je cherche désespérément un système pour pouvoir faire varier le nombre de colonnes d'une Grid CSS en fonction de la resolution du navigateur.

je m'explique. Par défaut j'ai un tableau de 4 ligne de 6 images.

Plutot que d'utiliser un tableau je souhaiterais utiliser un Grid CSS afin de pouvoir adapter les lignes d'images en fonction de la taille du navigateur (2 ligne de 12, 4 ligne de 6, 6 lignes de 4, 12 lignes de 2).

Seulement vu que les class des div e chaque images sont declaré en dur dans le html je vois mal comment scinder les colonnes.

Si vous avez une piste je suis preneur.
Merci pour votre aide

Bonjour et bienvenue,

Plutôt que faire varier le nombre de colonnes, il faut utiliser les media queries pour faire varier la largeur de ces colonnes. Ainsi, rien n'est à changer côté HTML

Pas mal de grilles CSS embarquent cette possibilité, je te conseille de jeter un oeil au récent article de Br1o sur les Frameworks CSS

Le problème c'est que la taille de mon contenu est fixe. Ce sont des images que je ne peux donc pas réduire ou agrandir contrairement a du texte.

En gros il me faudrait un système à la Pinterest mais avec des paliers de résolution pour éviter de me retrouver avec des lignes partiellement remplies.

Partant d'un système de grille «responsive» pour les conteneurs de tes images –ie. avec des paliers de résolution–, ne suffirait-il pas d'adapter via CSS la taille de tes images à la largeur de leur conteneur pour chaque palier ?

Sinon, il pourrait aussi y avoir la solution de tout simplement faire par exemple flotter les conteneurs des images les unes par rapport aux autres. Pour chaque palier de résolution, tu utilises alors une largeur fixe pour le conteneur parent des lignes d'images, qui vont automatiquement passer à la ligne.

Ainsi, pas de problème de redimensionnement d'images, non ?
…à moins que je ne m'emmêle complètement les pinceaux (effet vacances)
Modifié par audrasjb (25 Jul 2012 - 21:28)

Non effectivement c'est pas bête du tout!

Bon par contre va falloir sortir la calculette lol. Je test ça demain.