[Résolu] Alignement vertical en display GRID : alléger les déclaration

(reprise du message précédent)

Bonjour,

gcyrillus a écrit :
tu peut retirer le white-space et mettre le label en display:block , cela sera plus souple.

C'est fait.

gcyrillus a écrit :
Le centrage et l'alignement providentiel vient de : place-items:center; , revoit le codepen avec les exemples de placement pour visualiser les différents effets Smiley cligne ou voit son effet depuis ton codepen en le retirant en passant la souris sur la deuxième liste : https://codepen.io/gc-nomade/pen/rNPMebr.

Très intéressant.

Puisque le diable est dans le détail je signale un problème du grid en auto-fill sur mon codepen.

Tu diminues la taille de la fenêtre : tout va bien.
Fenêtre la plus petite possible, tu augmentes la taille de la police : sous Firefox cela ne marche plus.

boteha_2 a écrit :
Bonjour,
Puisque le diable est dans le détail je signale un problème du grid en auto-fill sur mon codepen.

Tu diminues la taille de la fenêtre : tout va bien.
Fenêtre la plus petite possible, tu augmentes la taille de la police : sous Firefox cela ne marche plus.

Cela me semble normal.
* la grille est normée à minmax(110px, auto) en auto-fill.
Notes:
auto-fit devient similaire à auto-fill au passage sur plusieurs ligne.
word-break: break-word; ou word-break: break-all; limiteraient les dégâts visuels.

* Les image sont aussi normées.
* le texte est initialement court et proche en largeur a celle des des images.

En grossissant uniquement le texte et en perdant la cohérence initiale de la grille/image/textes, la grille devient logiquement trop petite.
word-break resterait un pansement.
En normant eventuellement la taille des colonnes en em et les hauteurs des images aussi en em, l'ensemble devrait pouvoir mieux s'adapter à un zoom du visiteur.

cdt
Modifié par gcyrillus (04 Nov 2023 - 01:00)

Bonjour gcyrillus,

Encore merci de ton suivi.

J'ai essayé word-break, cela semble sans effet.

Actuellement dans le codepen :

ul.e2 > li {word-break: break-all}

J'ai essayé :

ul.e2 {max-width:  100%}

Sans effet, je suppose que tu comprends pourquoi (moi pas trop).

Une solution n'est-elle pas un media-queries pour passer la grille en une colonne dès que la largeur de la fenêtre est inférieure à deux fois la largeur d'une carte (ce qui est facile à calculer) ?

Associé à un media-container ?
Modifié par boteha_2 (04 Nov 2023 - 14:09)

Bonjour gcyrillus,

Merci beaucoup pour ton code mais cela devient compliqué sans que le résultat ne soit complétement convaincant.

Une petite pierre dans le jardin d'auto-fit et auto-fill il me semble.

Du coup je me demande s'il ne faut pas explorer la piste d'une flexbox comme tu l'as fait dans ton premier codepen.

J'y reviens plus tard.

PS : je n'ai pas trouvé de lien pour les fork sur mon codepen.
Modifié par boteha_2 (04 Nov 2023 - 22:12)

boteha_2 a écrit :
Bonjour gcyrillus,

Merci beaucoup pour ton code mais cela devient compliqué sans que le résultat ne soit complétement convaincant.

Bonjour, excuse moi si je t'ai perdu , il est très probable que je ne saisisse pas non plus ta problématique et le résultat voulu. Je ne t'ai mis que des exemples en liens et suggérer d'utiliser une simple liste, du coup on a fini par polluer ton souci initial.

Si je récapitule ce que j'ai compris, et soucis sue tu as:

- cette liste est un morceau de formulaire.

- alignement des items et de leurs contenus respectifs dans une grille
- grille instable si le texte est trop gros (... ou trop long)
- fluidité de la grille en fonction de l'espace disponible qui lui est attribué.

Ce que je ne sais pas
- de quel espace dispose cette liste, partage t'elle l'espace horizontal ?
- raisons des tailles d'images et des 110px comme base de colonne.

On a vu flex(1d) et grid (2d) avec leur différence.
On a vu quelques exemples d'alignement avec justify-x,align-x et place-x.
Puis évoquer des dimensions en em suite au défaut de taille de polices.

Où faut-il reprendre et quel résultat souhaites tu obtenir en final.

Cdt

Bonjour gcyrillus,

Encore merci de ton suivi.

gcyrillus a écrit :
Ce que je ne sais pas
- de quel espace dispose cette liste, partage t'elle l'espace horizontal ?

C'est une grille responsive.

gcyrillus a écrit :
- raisons des tailles d'images et des 110px comme base de colonne.

C'est un choix parce-que c'est bien équilibré avec cette taille, quelle que soit la largeur de la fenêtre (je ne relance pas la discussion avec Olivier C à propos des dimensions relatives).

En fait dans mon codepen la première ligne à base de 5 listes en inline-grid répond à toutes les contraintes.

Ton code plus simple à base d'une seule liste ne présente qu'un seul défaut : le zoom avant est mal géré sur une petite fenêtre.

Nous sommes des perfectionnistes mais nous avons déjà un code non affreux qui fonctionne.

Si tu vois une solution simple pour le problème du zoom avant (flexbox ?) je suis preneur.

Autrement ne te casse pas la tête.

J'espère que mes explications sont claires.

Dans ce cas, en prenant une liste simple le css qu'il te faudrait à partir de flex serait:

ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap:10px;
}

img {
  display: block;
  margin: auto;
}

li {
  min-width: 110px;
  text-align: center;
}

Cela semble similaire a ce qui te convient à la base, on s'est perdu à vouloir trop en faire https://codepen.io/gc-nomade/pen/dyaNzZO
++
Modifié par gcyrillus (06 Nov 2023 - 20:27)

Bonjour,

Merci pour le screen, je reste perdu là, car je vois tout le codepen qui débordé et pas seulement la vue. As tu le même défaut avec le code seul dans une page html?
Cdt.

Bonjour gcyrillus,

Bien vu, c'est sûrement le codepen qui fout le bazar.

Je fais le test sur une page html dès que j'ai le temps, sans doute en fin de journée, mais je suis quasi certain que cela marchera aussi bien en GRID qu'en FLEX.

Bonne journée.
Modifié par boteha_2 (07 Nov 2023 - 12:17)

boteha_2 a écrit :
Bonjour,

...

Dans mon codepen j'ai entré les codes en GRID et en FLEX.
FLEX devrait être un peu amélioré afin que toutes les lignes de légende soient à la même hauteur.
Existe-t-il un équivalent au magique place-items : center ?

Pas besoin d'équivalent , il suffit d'en faire usage :

ul.f1 {
  display: flex;
  flex-wrap: wrap;
  place-items:center;
  gap:20px;/* même valeur que pour le grid, pour un test au plus proche */
}

boteha_2 a écrit :

Sur un plan théorique un choix est-il meilleur que l'autre ?

Cela dépend seulement du type de grille que tu veut,
* grid construit une grille en 2d puis va placer les éléments dedans. Tu maitrise le nombre d’élément par ligne/colonne et les dimensions de chaque cellules( ligne/colonne). La grille est définie à partir du conteneur.
* flex construit la grille au fil de l'eau en 1d. Ce sont les enfants qui construisent une nouvelle cellule. Chaque ligne (ou colonne) sont indépendantes.

Je dirais que flex est ... plus flexible et que grid plus rigide, demande un minimum de réglage ...

cdt
Modifié par gcyrillus (09 Nov 2023 - 07:44)

Bonjour gcyrillus,

Bon là je crois que l'on approche du but.

Je pense choisir GRID en production, j'ai entendu dire que cela consomme moins de ressources que FLEX.

Sauf problème inattendu je reviens bientôt pour cocher Résolu.

Encore MERCI.

Bonjour,

Je coche Résolu.

Encore merci aux contributeurs.