Grid css spéciale responsive

Bonjour,
Est ce qu'il serait possible de rendre ce genre de grille responsive ? Voir l'image ci-dessous.

J'ai essayé de mettre les images en absolute pour avoir le bon positionnement mais dans ce cas impossible d'avoir du responsive.

Je préfère préciser que dans mon cas je serai obligé de définir le positionnement par PHP.

Merci d'avance pour votre aide et bonne soirée

Je préfère préciser que dans mon cas je serai obligé de définir le positionnement par PHP.



Cette phrase là me fait peur...
Pour plus de simplicité utilisé un framework css basé sur un système de grille tel que bootstrap

Merci pour ton message JENCAL, en fait j'utilise déjà bootstrap mais je ne vois pas comment faire ce type de positionnement.
Note bien les différences de hauteur et de largeur des différentes images.

Il faudrait faire un truc comme ceci : CodePen.

Ce code est ma réponse à un alsanaute sur un précédent topic, il faut l'adapter pour 5 colonnes avec des modules à 20% de largeur.

On peut simplifier le truc en utilisant des vw units, à condition que le design fasse 100% de la largeur.

Ce qui donnerait ceci (plus proche de votre design) : CodePen

PS : bien qu'il puisse générer le layout, le php n'a rien à voir dans le positionnement.

Merci beaucoup pour ton travail Olivier C !
J'ai une question, est ce possible d'indiquer des largeurs fixe plutôt que des pourcentages ? ex : 200px de large ou 400px de large pour chaque image.
Je précise que pour le php, je me suis posé la question car j'aurai surement besoin de faire une zone d'administration ainsi que de définir une position pour chaque image.
Bonne journée !
Modifié par alexmaje (28 Apr 2016 - 09:59)

Bonjour alexmaje,

Je te propose la lecture de cet article paru sur alsa : C'est quoi le Responsive Web Design ?
Cela te permettra d'y voir plus clair sur "le responsive design"
N'hésite pas à suivre les liens de l'article et à parcourrir les nombreuses ressources mises à disposition dans la section Apprendre (le moteur de recherche interne est ton ami)

bonjour, tu peut partir sur des largeurs fixes avec en plus des valeurs minimales et maximales.

tu peut finaliser avec des media querie pour casser le nombre de colonne.

ton croquis est compatible avec des éléments flottants.

exemple http://codepen.io/gc-nomade/pen/zqmZqd
Modifié par gcyrillus (28 Apr 2016 - 14:08)

gcyrillus a écrit :
bonjour, tu peut partir sur des largeurs fixes avec en plus des valeurs minimales et maximales.

du coup si on met une valeur fixe avec en plus un min et max, à quoi cela sert-il ? si ma taille est fixe elle ne sera jamais confronté à un min / max non ?

JENCAL a écrit :


du coup si on met une valeur fixe avec en plus un min et max, à quoi cela sert-il ? si ma taille est fixe elle ne sera jamais confronté à un min / max non ?

si elle est exprimée en pourcentage oui:
200px en fixe , 50% en max et 30% en min va passer au delà et au deçà des 200px initiaux en fonction de la largeur de la fenêtre et des 100% du conteneur.

admettons un conteneur sur la largeur de la fenetre:
fenêtre a 1200px : largeur à 400px; (min=30%)
fenêtre a 300px : largeur à 150px;(max = 50%)
en fait la largeur fixe n'est qu'un fallback ou si tu préfères une valeur de référence qui pourrait presque etre un simple commentaire dans le CSS.

on navigue autour des 200px et avec des rupture via les media queries on ajuste le nombre d’élément maximum par ligne en jouant avec ces min et max ...
Modifié par gcyrillus (28 Apr 2016 - 21:15)