Galerie masonry en CSS (style Pinterest)

Galerie masonry en CSS (style Pinterest): à quoi ça sert

La mise en page masonry emboîte des photos de hauteurs différentes en colonnes, sans trous, comme sur Pinterest. Collez les adresses des photos et choisissez les colonnes sur mobile, tablette et ordinateur, l’espacement, les angles et la légende sur la photo.

Le code utilise CSS columns, qui fonctionne dans tous les navigateurs, et ajoute le masonry natif de CSS (display: grid-lanes, lancé dans Safari 26.4 en mars 2026 et encore sans prise en charge stable dans Chrome et Firefox) dans un @supports, comme le recommande l’amélioration progressive. La page explique la différence d’ordre entre les deux techniques.

Mode d’emploi

1. Collez les adresses des photos.
2. Réglez les colonnes, l’espace et les angles.
3. Copiez le code.

Quand l’utiliser

• Portfolio de photographe.
• Galerie de réalisations d’un salon ou d’un studio.
• Mur d’inspirations.

Questions fréquentes

Qu’est-ce qu’une mise en page masonry ?

C’est une grille dans laquelle les éléments ont la même largeur mais des hauteurs différentes, et chacun s’emboîte juste sous le précédent dans la colonne, sans laisser d’espaces vides. Elle est devenue célèbre grâce à Pinterest et convient aux photos verticales et horizontales mélangées.

Faut-il du JavaScript ?

Non. Le code utilise CSS columns, qui fonctionne dans tous les navigateurs. Là où le masonry natif de CSS existe déjà (display: grid-lanes, lancé dans Safari 26.4 en mars 2026), un @supports active la nouvelle version, qui conserve l’ordre des photos de gauche à droite.

Pourquoi l’ordre des photos change-t-il avec CSS columns ?

Avec columns, les photos descendent dans la première colonne puis passent à la deuxième, comme dans un journal. Si l’ordre compte (les plus récentes d’abord, par exemple), placez les plus importantes au début de la liste et utilisez peu de colonnes, ou attendez que grid-lanes arrive dans les autres navigateurs.

Outils similaires