[Grid] Passer sur deux lignes en responsive

Bonjour

J'ai besoin d'un petit coup de main pour faire passer une série de logos qui tient sur une seule ligne grâce à grid layout, sur 2 lignes une fois le viewport des smartphones atteint.

Voici le site en cours de developpement (c'est en pied de page que ça se passe, avec la série de logos institutionnels) : http://dev.laclaranda.eu

Une des contraintes importante étant que le nombre d'items dans la grille peut varier, et qu'il est souhaitable de ne pas revenir sur le CSS à chaque fois (vous avez dit auto ?).

Voici le code CSS actuel en version Desktop qui répond à ce cahier des charges :

.partenaires-logos
  display: grid
  grid-auto-flow: column
  grid-template-rows: 1fr
  column-gap: 4rem

  figure
    align-self: center

J'aimerai faire en sorte que si le viewport est <650px, les logos s'étalent sur 2 lignes.
L'effet recherché, vous l'aurez compris, est de rentre lisible les logos (abuserais-je en disant "presque quelque soit leur nombre"), sans pour autant les rendre trop gros, donc sur autant de lignes que nécessaire avec 2, 3 ou 4 items à chaque fois.

J'ai essayé de jouer avec les paramètres minmax() etc... mais un truc méchappe.
Pour autant, je suis sûr qu'il y a un moyen super classe de résoudre cette problématique

Merci pour votre aide
Modifié par Spheerys (04 Mar 2020 - 10:14)

Hello,

Je suis désolé mais je ne suis pas sûr de ce que tu veux obtenir exactement ni quelles sont tes contraintes.

"A priori", il est assez simple d'obtenir le besoin que tu décris à l'aide d'une combinaison de auto-fit et de minmax, par exemple ainsi : https://codepen.io/raphaelgoetter/pen/MyGLgM

Si ce n'est pas le résultat souhaité, il va falloir que tu détailles un peu plus parce qu'au vu du nombre de réponse, je ne semble pas être le seul à ne pas avoir bien cerné le problème.

Bonne journée

Merci Raphaël pour ta réponse.
Faut que je me repenche en effet sur ces propriétés minmax... c'est pas super clair encore pour moi.
Heureusement j'ai ton bouquin sous le coude mais j'avoue avoir survolé cette section....

Ceci dit, après plusieurs tests moyennement fructueux, il s'avère que flexbox me semble finalement plus approprié.

Je suis encore tellement sous le charme de Grid Layout que j'aurai tendence à l'utiliser un peu trop souvent, en délaissant son acolyte