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

Bonjour,

Je voulais présenter un problème d'alignement vertical en display GRID mais je bute dès l'étape du codepen.

1) Les liens vers les images sont cassés mais pourquoi leurs tailles définies par le CSS ne sont-elles pas respectées ?

2) J'ai essayé de donner dans le code html les URL absolues des images mais elles ne se chargent pas.

Merci de votre aide.
Modifié par boteha_2 (29 Oct 2023 - 13:04)

Salut. Des URLs définies ainsi ne sont certainement pas des URLs absolues :

src="im/de/CB.svg"

Il est où le host ?
Modifié par Olivier C (29 Oct 2023 - 13:17)

Là maintenant, je ne suis pas en mesure de te répondre car je n'ai que mon téléphone mobile...
Mais, avant de continuer : pourquoi déclarer la taille des images en dur ? (Sur ce sujet on avait eut une conversion avec quelqu'un sur le forum déjà, il n'y a pas longtemps. N'était pas toi ?)

En attendant que moi ou quelqu'un d'autre puisse te répondre, donne nous précisément ce que tu cherches à obtenir. Personnellement J'zi du mal à voir.

Bonjour,

Si tu souhaites construire une grille, pourquoi ne pas la construire depuis une seule liste?

https://codepen.io/gc-nomade/pen/XWOXwbP (avec une option de centrage de la liste)

Pour les difference de placement, quand je m’emmêle les pinceaux, je me refait toujours un dessin : https://codepen.io/gc-nomade/pen/xxMZNOB en passant la souris sur body, les paragraphe passent en grid-auto-flow:column ce qui a pour effet de changer l'axe d'affichage de la grille et donc recale les justify-x et align-x sur leurs axes respectifs qui s'inversent.

Hello,

Olivier C a écrit :

Mais, avant de continuer : pourquoi déclarer la taille des images en dur ? (Sur ce sujet on avait eut une conversion avec quelqu'un sur le forum déjà, il n'y a pas longtemps. N'était pas toi ?)

Oui, c'était avec moi.
On avait traité le sujet en profondeur et ma conclusion était qu'il était loisible de déclarer en dur la taille des petites images, celles qui passent sur tous appareils y compris montres connectées...
J'ai notre discussion en mémoire, je pense que ce n'est pas la peine d'y revenir.

"gcyrillus" a écrit :
Si tu souhaites construire une grille, pourquoi ne pas la construire depuis une seule liste ?

Tu mets tout dans une flexbox, très intéressant, mais en l’occurrence et avec tout mon respect mon code n'est-il pas plus simple ?

"gcyrillus" a écrit :
Pour les difference de placement, quand je m’emmêle les pinceaux, je me refait toujours un dessin en passant la souris sur body, les paragraphe passent en grid-auto-flow:column ce qui a pour effet de changer l'axe d'affichage de la grille et donc recale les justify-x et align-x sur leurs axes respectifs qui s'inversent..

Merci pour ce lien.
j'avoue que je n'ai pas tout compris mais je vais y revenir.
Modifié par boteha_2 (29 Oct 2023 - 17:11)

Sur cette page tu trouveras une demo de tous les exemples de mes grilles : Grids

La dernière (.grid-auto-min.gap) semble convenir à tes besoins (enfin, si j'ai bien compris de quoi il s'agit). Elle s'appuie le mot clef "auto-fit" pour la définition des colonnes. Adapté à ta situation ça ressemblerait à ça :

.maGrille {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fit, minmax(var(--size-grid, 10em), 1fr));
  grid-auto-rows: minmax(0, 1fr);
}

.maGrille .gap {
  gap: var(--gap, 1em);
}

Les variables CSS c'est pour personnaliser dans le HTML si besoin.
Modifié par Olivier C (29 Oct 2023 - 23:06)

Olivier C a écrit :
Sur cette page tu trouveras une demo de tous les exemples de mes grilles : Grids

Sauf erreur ton lien ne fonctionne pas, il ne se passe rien quand je clique.

gcyrillus,

Je ne veux pas t'ennuyer avec ce détail mais sur mon codepen cela semble mieux centré.

boteha_2 a écrit :
Sauf erreur ton lien ne fonctionne pas, il ne se passe rien quand je clique.

C'est corrigé.

Bonjour Olivier C,

Olivier C a écrit :
La dernière (.grid-auto-min.gap) semble convenir à tes besoins (enfin, si j'ai bien compris de quoi il s'agit). Elle s'appuie le mot clef object-fit pour la définition des colonnes.

En effet.
Mais je n'ai pas compris comment voir ton code html/css.

Bonjour gcyrillus,

J'ai entré l'essentiel du code de ton codepen sur un nouvel élément dans mon codepen : ul.e2

Je comprends comment tu obtiens le Responsive : auto-fill

Je comprends comment tu crées la deuxième ligne : li {white-space: pre}
Astucieux mais attention à ne pas oublier des espaces blancs dans le code html.

Par contre je ne comprends pas par quel heureux miracle les deuxièmes lignes sont verticalement alignées comme dans un tableau alors que les hauteurs des images ne sont pas égales.
C'est bien l'effet voulu mais quel code le commande ?

Autre question, dans ul.e2 pourquoi le li de VISA n'est-il pas à la taille du contenu ?
Modifié par boteha_2 (01 Nov 2023 - 16:36)

boteha_2 a écrit :
Bonjour gcyrillus,

Bonjour à toi

boteha_2 a écrit :

Je comprends comment tu obtiens le Responsive : auto-fill

Je comprends comment tu crées la deuxième ligne : li {white-space: pre}
Astucieux mais attention à ne pas oublier des espaces blancs dans le code html.

tu peut retirer le white-space et mettre le label en display:block , cela sera plus souple.
auto-fit est aussi une option comme le suggère OlivierC

boteha_2 a écrit :

Par contre je ne comprends pas par quel heureux miracle les deuxièmes lignes sont verticalement alignées comme dans un tableau alors que les hauteurs des images ne sont pas égales.
C'est bien l'effet voulu mais quel code le commande ?

Tout d'abord, le white-space provoque cela.
Ensuite, on a une ligne supplémentaire dessus et dessous, mais le contenu reste composé d'une image et d'une ligne, tout comme les autres.
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 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

boteha_2 a écrit :
Autre question, dans ul.e2 pourquoi le li de VISA n'est-il pas à la taille du contenu ?

toujours ce fichu white-space que j'avais mis pour économiser un sélecteur mais qui permet de mettre en évidence ici l'effet du place-items .
https://codepen.io/gc-nomade/pen/wvNzGmW sans le white-space et label en block.

cdt
Modifié par gcyrillus (02 Nov 2023 - 10:08)

Bonjour,

Encore merci de votre suivi.

J'y reviens ce soir.

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.