[Résolu] Alignement vertical avec auto-fill

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 ?

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

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)

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.

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,

Merci de ton suivi.

Cela semble parfait.

Je regarde en détail demain.

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)

Bonsoir,

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

https://codepen.io/gc-nomade/pen/QWPaNvL (pen mis à jour - pour les exemples, tu peut utiliser de vrai fausses images).

Voir https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Subgrid .
Si tu ne connais pas encore, il y a https://gridbyexample.com/ avec plein d'exemples https://gridbyexample.com/examples2/example2-1/

cdt

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

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)