Le secret derrière le design de Pinterest (et comment j'ai fini par le reproduire)
Tu t'es déjà demandé comment Pinterest arrive à afficher ses images de manière aussi fluide ?
Des photos de tailles différentes, pas vraiment alignées… et pourtant, le rendu est toujours parfait.
Moi aussi, ça m'a longtemps intrigué.
Je voulais recréer le même effet sur mon site, mais impossible de trouver les bons mots pour décrire ce que je voyais.
Je tapais des trucs comme :
"grille fluide responsive", "images qui s'empilent joliment"...
Mais rien de vraiment convaincant.
Jusqu'au jour où j'ai découvert qu'en réalité, ce style de mise en page avait un nom bien précis.
Et à partir de ce moment-là, tout est devenu beaucoup plus simple.
Le jour où tout s'est éclairé
Le simple fait de connaître le nom a tout débloqué : tutos, ressources, librairies, tout est apparu comme par magie.
C'est fou à quel point mettre un mot sur une idée peut transformer ta façon d'apprendre.
Aujourd'hui, c'est ce même layout que j'utilise sur mon site, dans la partie blog.
Certains articles ont une image, d'autres pas — ce qui fait que les cartes n'ont pas toutes la même hauteur.
Et pourtant, tout reste parfaitement aligné et harmonieux, exactement comme sur Pinterest.
Comment faire ce rendu facilement avec du CSS
Tu n'as même pas besoin de JavaScript.
Un peu de CSS moderne suffit pour obtenir le même résultat :
.masonry {
columns: 3;
column-gap: ;
}
{
: avoid;
: ;
}
Commentaires