Bonjour à toutes et tous et merci de m'accorder un peu de votre temps

J'aimerai réaliser ceci :

L'idée est de faire ça à partir d'une base de donnée qui va récupérer les équipes et les imprimer sur la page (sur cette partie là je suis ok), mais je vois mal comment je pourrais faire pour que mes blocs changent de colonne à chaque fois (c'est à dire qu'on imprime le premier à gauche, le second à droite, le troisième à gauche, ...).

Je me suis creusé et j'ai creusé les forums, mais je n'ai pas vu de solution qui fonctionnent dans mon cas :/

Merci par avance, Tristan

-
Edité par trguerlez 28 janvier 2023 à 21:08:50

bonsoir,

Il y aurait https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout qui serait ce que tu souhaites, sauf que pour le moment , il n'y a que Firefox de compatible . En gestation ici https://drafts.csswg.org/css-grid-3/#masonry-layout

un exemple https://codepen.io/gc-nomade/pen/WNjEMwB (en direction rtl, ce n'est pas un bug) .

Si l'anglais te va, voici un article qui commence à dater mais interessant : https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/

Column CSS https://developer.mozilla.org/fr/docs/Web/CSS/columns , quand à cette méthode dessineras tes élément colonnes par colonnes de mêmes largeurs , ce qui peut-être une alternative (en utilisant @support) si vraiment tu veut du 100% CSS.

Reste de sur et solid le script de https://masonry.desandro.com/ qui depuis plus d'une decennie fait le job et plus

Maintenant , coté serveur, il te suffit de mettre dans un conteneur ou l'autre un élément sur deux au fur et a mesure que tu les extrait et ne faire l'affichage qu'une fois ta boucle terminée.

Cdt

-
Edité par gcyrillus 28 janvier 2023 à 22:26:41