[Résolu] Peut-on utiliser Grid sans connaitre à l'avance le nombre d'é

Bonjour à tous et à toutes,

Je travaille pour une boite qui réalise des portails informatiques à destination des bibliothèques/médiathèques et l'une des pages qui est au coeur de ce genre de portails, c'est la page de résultats de recherche.
On m'a chargé de revoir l'affichage de cette page parce qu'actuellement, les résultats (c'est à dire la vignette + le(s) auteur(s) + l'année de publication + la maison d'édition + la disponibilité + des boutons) s'affichent façon "maçonnerie" (masonry en anglais), donc pas alignés du tout, ce qui ne plait pas à bon nombre de clients.

Je pensais partir sur Grid Layout pour remplacer le (vieux) Bootstrap qu'on a et surtout pour aligner tout ça.
Généralement, quand j'utilise Grid, je passe par un générateur comme https://grid.layoutit.com/ Ça me crée ma structure HTML et mon CSS dans les grandes lignes. Bref, ça fonctionne généralement très bien ... car je connais à l'avance combien j'ai d'éléments HTML et comment les imbriquer.

Le problème de la page de résultats de recherche, c'est que je ne connait pas, à l'avance, combien d'éléments je vais avoir (sur la page). En effet, d'une part ça peut varier selon la recherche de l'utilisateur, et d'autre part l'utilisateur peut changer le nombre de résultats par page.

Etant donné que le nombre d'éléments peut changer et qu'il faut, dans Grid, nommer les éléments (dans les propriétés grid-area et grid-template-area), est-ce que je peux utiliser Grid sans connaitre à l'avance le nombre d'éléments ? Autrement dit, est-ce que Grid peut être dynamique ou est-ce que c'est nécessairement et obligatoirement statique ? Si oui, avez-vous des exemples SVP ?

Je vous remercie pour votre réponse .

Bonne journée
Modifié par spip93 (25 Jan 2024 - 11:03)

Bonjour,

P***B au pif ? Je m'étais bien marré à restyler ça (non) (*)

Grid > oui ça peut être dynamique / "flexible" (le mot est mal choisi vu la confusion immédiate avec Flexbox ).
Tu as les concepts de grille implicite ou explicite (y a tout un tuto sur MDN pour les différents concepts de Grid Layout, apparemment et tous peuvent servir selon le besoin ).
grid-area c'est vraiment sympa à relire, c'est visuel mais pas forcément adapté à des éléments optionnels... ah si, c'est pas ça le souci, c'est plutôt la taille que peut prendre un élément absent de ta grille : 0 de largeur est probablement ce que tu recherches et pas une largeur fixe ou un minimum avec minmax().
Tu peux avoir un certain grid-template-columns et/ou template-grid-areas dans un certain cas (via une classe sur le parent / un ancêtre) et un autre dans un autre cas.

Ensuite pour des résultats de recherche, tu peux éviter de déclarer explicitement le nombre de lignes (auto vs template, cf implicite et explicite ci-dessus). Si tu dois vraiment les déclarer (?), il faut connaître le nombre max et si absent alors hauteur 0 (aucun effet sur ta page). Tu peux faire un repeat(25, 50 ou 100, etc) m'enfin si tu peux t'en passer ça devrait énormément te faciliter la tâche.
C'est pas forcément une grille unique, ça peut être 1 grid container par résultat, déclarés à l'identique... Pas de risque de voir un élément remonter visuellement de 15 résultats, c'est 1 résultat après l'autre ainsi.

(*) best of de sélecteur parce que pas de classe sur les pictos ou leur conteneur :

#help-container img[src*="/close"],
#help-container img[src*="/up"],
.notice-parent img[src$="nomgif=moins"],
.notice-parent img[src$="nomgif=plus"] {}

Modifié par Felipe (25 Jan 2024 - 15:53)

Bonjour @Felipe,

Merci pour la réponse
Bien tenté, mais non, ça n'est pas P**B ; c'est un concurrent (D*****G qui est en Ardèche) Ceci dit, le portail que tu mets en exemple aurait pu être un client.

Merci pour la réponse. Je ne connaissais pas le concept de grille implicite que tu donnes en exemple. En cherchant des choses autour d'une grille CSS dynamique, j'ai trouvé (par rebond) sur ce codepen qui reprend ce concept de grille implicite.

Je l'ai adapté, et (avec d'autres règles CSS, notamment Flex) ça semble fonctionner :
Avant :


Après :


Par contre, j'ai dû mettre une taille (fixe) pour les titres de documents parce que display : flex entrait en conflit avec une autre règle CSS limitant les titres à 3 lignes (voir ci-dessous) :

.row.result-default > div .panel-card .panel-body h5.panel-card-title a {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

J'ai aussi dû également empêcher l'exécution du fichier masonry.pkgd.min.js qui provoque, comme son nom l'indique, la mise en page masonry.

En tout cas, encore merci pour m'avoir parlé de grille implicite et de m'avoir mis sur la bonne piste.

Bonne journée
Modifié par spip93 (27 Jan 2024 - 15:56)