28114 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement vertical avec auto-fill

Bonjour,

Cette discussion fait suite à cette discussion.

Je complique un peu le problème avec des images de différentes hauteurs.
Dans le codepen les hauteurs des images sont forcées

L'objectif est d'avoir :
Les textes de légende tous à la même hauteur.
Les images verticalement centrées les unes par rapport aux autres.
Sachant que les hauteurs des images peuvent être toutes différentes.

Ce codepen montre que le résultat est très facile à atteindre avec une suite d'ul en display: inline-block pourvu que le li parent de l'image soit doté d'une hauteur fixe.

Si on passe en GRID et auto-fill je ne vois pas comment obtenir le même résultat.
J'ai placé ce code en début du codepen.

Merci de votre aide.
Modifié par boteha_2 (30 Mar 2024 - 15:45)
Bonjour gcyrillus,

Merci de ton suivi.

Je vais décortiquer ton code.
L'avantage est que l'alignement vertical est bien géré sans avoir à définir de hauteur pour le parent de l'image.

On est d'accord que c'est plus performant qu'une suite d'in:line-block et que c'est compris par à peu près tous les navigateurs ?
Modérateur
Je ne sais pas si c'est plus performant pour la mise en page, je sais seulement que c'est compris par tous les navigateurs actuels et que c'est adapté à un affichage de type grille. Grid et flex ont justement permis de s'affranchir des astuces à base de float, inline-block et table/table-cell.

IMHO : Maintenant, si l'on reprend un pentium ou un ie3 de première génération et 4 go de ram, c'est sur que ça ne sera pas performant. Je me souviens de mes premiers test avec box-shadow et transform , les deux préfixés, c'était compliqué Smiley cligne si ça ne freezer carrément pas le navigateur (premières versions de FF). Aujourd'hui nos mobiles sont plus performant que nos pc d'il y a 10 ou 15 ans. Je pense aussi que flex et grid sont aussi bien implémenter et optimiser dans les navigateurs pour réduire les défauts de performances.

Cdt
Bonjour,

Je ferai un test avec PageSpeed Insights histoire de vérifier que les Grid imbriqués sont moins graves que les table imbriqués, le mal absolu à une époque.

Mais je n'ai pas trop de doute.
Le problème des tables ne sera pas un problème de performance, de performance visible tout au moins : c'est avant tout un problème d'accessibilité et, secondairement, un problème pour le responsive.
C'est sûr que l'emploi de table pour la mise en page est une horreur.
Heureusement le sujet est clos depuis déjà longtemps et constitue juste une petite parenthèse à cette discussion.
Bonjour,

J'ai intégré le code de gcyrillus à ma sauce dans le codepen.

Juste deux remarques :

1) Pour que le premier élément li soit bien aligné à gauche il faut donner au ul un padding-left à 0.
Je ne sais pas si c'est le codepen qui crée un padding par défaut.

2) Si la hauteur de la première ligne du li est de 1fr, en cas de passage à la ligne la hauteur de chaque ligne sera déterminée par celle de la plus haute image de la ligne.
Plus fluide que cela...
Si l'on veut que toutes lignes aient la même hauteur il faut entrer une hauteur égale à plus haute image + la marge basse.
C'est ce que j'ai fait dans le codepen.
Modifié par boteha_2 (31 Mar 2024 - 16:43)
Modérateur
boteha_2 a écrit :
Bonjour,

1) Pour que le premier élément li soit bien aligné à gauche il faut donner au ul un padding-left à 0.
Je ne sais pas si c'est le codepen qui crée un padding par défaut.

bonsoir,

C'est un padding de 2em par défaut, ton codepen ne fait aucun reset. C'est tout a fait normal. Cela laisse la place et permet d'afficher les puces avec les styles par défaut.

cdt
Modifié par gcyrillus (31 Mar 2024 - 19:39)
Bonsoir,

J'ai fait un test avec PageSpeed Insights et je pense pouvoir dire que cela dépote :

Cumulative Layout Shift : 0.006

C'est par prudence que je ne coche pas encore Résolu.
Bonjour,

Je reviens avec dans le codepen une nouvelle suite et un énoncé un peu différent.

Image : largeur fixe, hauteur variable.
Légende de l'image : longueur variable.

Les images sont centrées verticalement les unes par rapport aux autres.

Les premières lignes des légendes sont alignées verticalement.

Il faut un filet arrondi sur la première ligne de chaque élément.

J'ai trouvé un code pour le faire mais je me demande si c'est bien optimisé, aussi bien sur le plan du html que de la feuille de style.

Accessoirement je ne suis pas arrivé à centrer verticalement les images avec les propriétés de GRID, j'ai dû transformer le parent en FLEX puis appliquer margin: auto à img.

Autre question, pour un bon alignement des légendes j'ai dû définir une hauteur exacte pour la première ligne : {grid-template-rows: 136px auto}

Y aurait-il moyen d'être totalement fluide ?

Le résultat est très bien mais avez-vous des idées d'amélioration ?
Modifié par boteha_2 (02 Apr 2024 - 22:00)
Modérateur
Bonsoir,

Je te propose : https://codepen.io/gc-nomade/pen/QWPaNvL

j'ai opté pour un aspect-ratio:1/1 pour le conteneur de l'image de façon à ce qu'ils aient tous la même hauteur et s'affranchir des 136px que tu appliques.

pour li , grid-template-rows: auto 1fr; le premier a(lien) sont des carrés de même taille, auto suffit. Le second a(lien) peut avoir de 1 à 3 lignes, 1fr lui laisse tout l'espace restant disponible et permet de les centrer verticalement si tu le souhaites.

Le centrage se fait avec place-content:center avec grid. Peut-être appliquer sur le premier lien ou tout les deux si tu veut aussi centrer le second lien .

cdt
Modifié par gcyrillus (02 Apr 2024 - 22:30)
Bonjour,

gcyrillus a écrit :

j'ai opté pour un aspect-ratio:1/1 pour le conteneur de l'image de façon à ce qu'ils aient tous la même hauteur et s'affranchir des 136px que tu appliques.


Ah, j'aurais dû le préciser dans l'énoncé, mais la forme des images peut être un rectangle moins haut ou plus haut qu'un carré.

Le truc est de repérer l'image la plus haute et de définir en conséquence la hauteur du parent.
Avec PHP je détermine cette hauteur au vol (les hauteurs des images sont dans la base de donnée) et j'injecte la déclaration CSS dans le head de la page html.

J'ai modifié mon codepen avec des images rectangulaires toutes moins hautes que le carré.

Du coup aspect-ratio:1/1 n'est pas adapté.
Vois-tu quand même un moyen d'éviter une hauteur en dur calculée par PHP ?
L'idéal serait même que la hauteur de chaque ligne soit déterminée par l'image la plus haute de la ligne.
Ce serait très facile si la hauteur du texte n'était pas indéterminée.
Modifié par boteha_2 (03 Apr 2024 - 22:56)
Bonjour gcyrillus,

gcyrillus a écrit :

Dans ce cas , il faut se servir de subgrid et caler notre grid-template-row à partir du parent .


Intéressant en effet, je ne connaissais pas.

Sais-tu si subgrid est assez bien supporté pour production ?
Modérateur
Bonjour, je dirais que selon https://caniuse.com/?search=subgrid , il est raisonnable de penser que oui. Il n'aura pas fallu attendre une décennie Smiley smile

Il y a toujours @support que tu peut utiliser, si tu as besoin d'une alternative pour ceux qui ont de vieux navigateurs, pour remonter un peu dans le temps

Cdt
Modifié par gcyrillus (04 Apr 2024 - 14:08)
Bonjour,

J'ai mis subgrid en action.

Encore merci de votre aide, particulièrement gcyrillus.

Je coche Résolu.
Bonjour,

Juste un petit détail, avec la validateur W3C de Firefox :

Error: CSS: grid-template-rows: subgrid is not a grid-template-rows value.

Ce qu'il n'aime pas dans le code html:

<style>
@supports not (grid-template-rows: subgrid)
{
ul.mrj > li {grid-template-rows: 136px auto}
}
</style>


Par contre subgrid est bien compris par les quelques navigateurs que j'ai testés :
Firefox, Chrome, Edge, Safari.
Modifié par boteha_2 (13 Apr 2024 - 20:51)
Prévenir un modérateur
Répondre au sujet
Aller à