28172 sujets

CSS et mise en forme, CSS3

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

Pages :
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)
Bonjour Olivier C,

Merci de ton suivi.

Dans le codepen j'ai entré les URL absolues et maintenant les images apparaissent.

L'objectif est d'avoir un effet de tableau RESPONSIVE avec dans chaque "cellule" (ul) Centrage horizontal et vertical des éléments.

Le début du CSS ne sert qu'à donner les dimensions des images et c'est cette déclaration qui gère le positionnement.

ul {margin: 10px 0; display: inline-grid; grid-template-columns: minmax(110px, auto); grid-template-rows: 52px 10px; justify-content: center; align-content: center; justify-items: center; align-items: center}


Cela semble bien fonctionner mais je m'y perds sur deux points :

1) Sur quel axe porte justify-items ?
Le réponse me donnera l'axe de align-items:...

2) J'ai toujours du mal à bien comprendre la différence entre justify-items: et justify-content.

Par ailleurs cette déclaration n'est pas monstrueuse mais penses-tu qu'elle puisse être simplifiée.
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.
Modérateur
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)
Modérateur
boteha_2 a écrit :


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 ?



Merci pour ce lien.
j'avoue que je n'ai pas tout compris mais je vais y revenir.


Heu non, il n'y a qu'une seule liste en grid au lieu de plusieurs et 1 seul li par carte.

Le conteneur en flex est pour un exemple de centrage éventuel.que tu peux tester en cliquant la checkbox. Tu peut laisser de côté et revenir plus tard dessus au besoin.

Pour le second lien, c'est juste le visuel des différentes règles qui t'intéressent et selon l'axe d'affichage de la grille.

Cdt
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 object-fit pour la définition des colonnes.
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)
Bonsoir,

gcyrillus a écrit :
Heu non, il n'y a qu'une seule liste en grid au lieu de plusieurs et 1 seul li par carte.


C'est vrai, je reconnais...
Sous Firefox le texte sous l'image VISA est mal centré, est-ce un bug du codepen ?

gcyrillus a écrit :
Pour le second lien, c'est juste le visuel des différentes règles qui t'intéressent et selon l'axe d'affichage de la grille.


D'accord, c'est précieux.
Modifié par boteha_2 (29 Oct 2023 - 19:43)
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.
Modérateur
boteha_2 a écrit :
Bonsoir,
Sous Firefox le texte sous l'image VISA est mal centré, est-ce un bug du codepen ?.


Si tu met une bordure aux images, c'est moins flagrant Smiley cligne
Cdt
Olivier C a écrit :
C'est corrigé.

Je confirme.

Merci pour toutes vos pistes, gcyrillus et Olivier C, je dois arrêter pour aujourd'hui mais j'y reviens bientôt.
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)
Modérateur
boteha_2 a écrit :
Bonjour gcyrillus,


Bonjour à toi Smiley smile

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 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

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,

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.
Prévenir un modérateur
Pages :
Répondre au sujet
Aller à