Le web moderne ne cesse d’évoluer. Chaque année, de nouvelles propriétés CSS 3 apparaissent pour nous simplifier la vie et rendre nos interfaces plus esthétiques et dynamiques. L’une des nouveautés qui suscite beaucoup d’intérêt est la valeur de la propriété display : mansory . Vous avez peut-être déjà vu ce type de mise en page sur des sites populaires comme Pinterest ou certains blogs de photographes.
Ces interfaces proposent une disposition en colonnes où les éléments semblent s’imbriquer naturellement, formant une grille fluide et harmonieuse. À l’image de Pinterest.
La propriété display : mansory
- display: mansory;
- display: grid;
- display: flex;
Pendant longtemps, obtenir ce genre de rendu demandait de recourir à JavaScript ou à des bibliothèques tierces parfois lourdes et complexes. Aujourd’hui, avec CSS masonry, cette organisation devient accessible directement via le langage CSS, sans ligne de code supplémentaire.
Dans ce tutoriel, nous allons explorer en détail ce qu’est display: masonry, à quoi il sert, ses avantages et ses limites, ainsi que des exemples pratiques pour l’utiliser efficacement. Nous prendrons le temps d’expliquer chaque notion afin que vous puissiez reproduire les exercices, même si vous débutez en développement web.
Qu’est-ce que le display: masonry ?
Avant de plonger dans la technique, prenons un moment pour comprendre ce que signifie réellement le terme « masonry ». En anglais, il se traduit par « maçonnerie », un mot qui évoque la construction de murs avec des briques, des pierres ou des blocs qui s’imbriquent les uns avec les autres. Cette image est parfaite pour illustrer le rendu attendu.
Avec masonry en CSS, vos éléments se placent automatiquement dans des colonnes verticales, à la manière de briques qui trouvent leur place, tout en conservant leur hauteur naturelle.
Contrairement à une grille classique qui impose des lignes horizontales alignées, le masonry casse cet alignement. Chaque élément conserve sa hauteur propre, et les éléments suivants viennent se glisser juste en dessous, créant un effet de cascade fluide. Le résultat est un affichage qui donne une impression d’ordre et de dynamisme, sans avoir à manipuler les hauteurs ou les espacements de manière complexe.
Par exemple, si vous affichez une série de cartes contenant des images et des textes de longueurs différentes, un affichage en grille classique laissera des espaces vides dans certaines lignes. Avec masonry, ces vides disparaissent puisque les cartes s’empilent naturellement les unes après les autres, optimisant l’espace visuel et donnant un rendu plus esthétique.
Historiquement, obtenir ce type de disposition nécessitait de passer par JavaScript, notamment grâce à des bibliothèques comme Masonry.js, qui ont longtemps été la référence. Aujourd’hui, le CSS moderne intègre cette logique nativement, ce qui signifie plus de performance et moins de dépendances externes.
À quoi sert le display: masonry ?
Le display: masonry est principalement utilisé pour créer des mises en page dynamiques et esthétiques, adaptées à des contenus de tailles variables. Si vous avez déjà travaillé avec display : grid ou flexbox, vous savez que ces deux techniques alignent vos éléments sur des lignes horizontales bien définies. Or, dans certains cas, cette rigidité peut poser problème.
Imaginez que vous ayez une galerie d’images où chaque photo n’a pas la même hauteur, ou bien un ensemble d’articles de blog avec des descriptions de longueur différente. Avec une grille classique, chaque ligne prend la hauteur de l’élément le plus grand, ce qui crée de nombreux espaces vides visuellement peu attractifs. C’est là que le masonry devient utile.
Le rôle principal de cette propriété est d’organiser le contenu de manière fluide, en remplissant les colonnes verticales sans se soucier d’aligner les lignes. Le rendu est plus harmonieux et naturel, ce qui améliore la lisibilité et l’expérience utilisateur.
Le display: masonry est particulièrement adapté dans les cas suivants :
- Pour afficher une galerie de photos ou de vidéos où les proportions diffèrent.
- Pour mettre en avant une collection de cartes (articles, fiches produits, portfolios, témoignages).
- Pour créer des mises en page inspirées de Pinterest, où chaque élément a une hauteur variable.
- Pour organiser visuellement des contenus hétérogènes tout en optimisant l’espace.
En résumé, son but est de faciliter une mise en page dynamique, surtout lorsque le contenu n’a pas une taille uniforme.
Les avantages du display: masonry
Le masonry en CSS n’est pas seulement une nouveauté intéressante : il offre de vrais avantages concrets pour les développeurs et les designers.
Un rendu visuel moderne et attrayant
Le premier avantage est purement esthétique. Le rendu obtenu grâce au masonry donne immédiatement une impression de modernité et de fluidité. Contrairement à des grilles figées, l’effet en cascade attire l’œil et met en valeur chaque élément, sans laisser de zones inutiles vides. Cela s’adapte parfaitement aux sites créatifs, aux portfolios ou aux plateformes de contenu riche.
Un gain de temps considérable
Avant l’arrivée du display: masonry, mettre en place ce type de mise en page impliquait de recourir à JavaScript. Les bibliothèques dédiées fonctionnaient bien, mais elles alourdissaient le site et demandaient une certaine configuration. Avec CSS masonry, tout se fait directement dans la feuille de style, en une ou deux lignes de code. C’est un gain de temps énorme pour les développeurs.
Des performances améliorées
Comme cette fonctionnalité est désormais gérée directement par le moteur CSS du navigateur, elle est plus performante qu’une solution basée sur JavaScript. Moins de scripts à charger, moins de calculs à effectuer côté client, donc une page plus rapide et plus légère.
Une meilleure adaptabilité aux contenus dynamiques
Le masonry est particulièrement intéressant si vous affichez des contenus générés dynamiquement. Par exemple, un site d’actualités, un flux d’articles ou une galerie photo alimentée par une base de données. Vous n’avez pas besoin d’anticiper la hauteur exacte de chaque élément, le système s’adapte automatiquement et dispose les éléments de manière harmonieuse.
Une expérience utilisateur plus agréable
En éliminant les espaces vides et en optimisant l’occupation de l’écran, le masonry rend la navigation plus fluide. L’œil suit naturellement la disposition des éléments, ce qui facilite la lecture et incite à parcourir plus de contenu.
Les limites du display: masonry
Même si le masonry en CSS semble être une solution magique pour créer des mises en page modernes et fluides, il est important de connaître ses limites actuelles. En effet, cette propriété est encore relativement nouvelle et n’est pas totalement supportée ou standardisée dans tous les navigateurs.
Un support limité par les navigateurs : L’une des principales limites du masonry est sa compatibilité. Actuellement, cette fonctionnalité est en cours d’expérimentation et n’est pas activée par défaut sur tous les navigateurs. Firefox a proposé un support expérimental, tandis que Chrome et Safari sont encore en phase de tests. Cela signifie que vous ne pouvez pas encore l’utiliser en production si vous ciblez un large public, sauf à prévoir des solutions alternatives pour les navigateurs qui ne le prennent pas en charge.
En pratique, vous devrez vérifier régulièrement les ressources comme Can I Use pour connaître l’état de compatibilité. Cela fait partie des réalités du développement web moderne : toutes les nouveautés CSS mettent du temps à s’imposer.
Des fonctionnalités encore limitées : Contrairement à grid ou flexbox, qui offrent un contrôle précis sur l’alignement, les espacements et les ajustements, le masonry est encore assez rudimentaire. Vous pouvez définir des colonnes et des espacements, mais vous n’avez pas un contrôle total sur l’ordre de placement des éléments ou sur l’ajustement de certaines zones.
Par exemple, il n’existe pas encore d’options natives pour remplir automatiquement les trous éventuels si certaines hauteurs sont trop différentes. Le rendu est fluide, mais il reste dicté par le moteur CSS, sans possibilité d’intervenir finement.
Une dépendance forte au contenu : Le fonctionnement du masonry repose sur la hauteur naturelle des éléments. Cela signifie que si vos contenus ne sont pas équilibrés ou contiennent des éléments beaucoup plus hauts que les autres, le rendu peut parfois sembler désordonné. Contrairement à une grille stricte, vous perdez ici une partie du contrôle sur l’homogénéité visuelle.
Un manque de maturité pour les projets complexes : Pour des projets simples comme une galerie d’images ou un portfolio, le masonry CSS est déjà une solution très efficace. Mais dès que l’on parle d’interfaces complexes, de mises en page multi-sections ou de gestion avancée des alignements, les limites apparaissent vite. Aujourd’hui, de nombreux développeurs continuent donc d’utiliser JavaScript ou une combinaison de CSS Grid et de scripts pour pallier ces manques.
Une accessibilité encore discutable : Comme le masonry ne respecte pas l’ordre logique des lignes, il peut parfois poser problème en termes d’accessibilité. Pour les personnes utilisant des lecteurs d’écran ou naviguant uniquement au clavier, l’ordre de lecture n’est pas forcément intuitif. Il faut donc être vigilant et toujours tester vos interfaces pour vous assurer qu’elles restent accessibles.
Comment utiliser le display: masonry ?
L’utilisation du display: masonry est assez simple dans sa forme. Il suffit de l’appliquer à un conteneur, exactement comme vous le feriez avec flex ou grid. Voici la syntaxe minimale :
.container {
display: masonry;
}En appliquant cette règle à un conteneur, tous les éléments enfants vont automatiquement s’organiser en colonnes verticales. Le moteur CSS calcule la disposition en fonction de la largeur du conteneur et de la taille de chaque élément.
Pour affiner la mise en page, vous pouvez ajouter certaines propriétés complémentaires :
column-gap: pour définir l’espacement horizontal entre les colonnes.row-gap: pour définir l’espacement vertical entre les éléments d’une même colonne.masonry-auto-flow: une propriété expérimentale qui permet de gérer la façon dont les éléments sont placés.
Exemple :
.container {
display: masonry;
column-gap: 20px;
row-gap: 20px;
}Ici, les éléments se placeront en colonnes avec un espace de 20 pixels entre elles et entre les éléments superposés.
Exemple 1 : comment ça marche ?
<div class="masonry">
<div class="cube" style="height : 200px">1</div>
<div class="cube" style="height : 100px">2</div>
<div class="cube" style="height : 50px">3</div>
<div class="cube" style="height : 80px">4</div>
<div class="cube" style="height : 120px">5</div>
<div class="cube">6</div>
<div class="cube">7</div>
<div class="cube">8</div>
<div class="cube">9</div>
</div>.masonry {
display: masonry; /* La magie ici */
column-gap: 1rem; /* Espace entre les colonnes */
row-gap: 1rem; /* Espace entre les lignes */
column-count: 3;
column-gap: 15px;
row-gap: 15px;
}
.cube {
background: #4a90e2;
border-radius: 8px;
color: white;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
/* Alternance de couleur */
.cube:nth-child(odd) {
background: #4a90e2; /* bleu */
}
.cube:nth-child(even) {
background: #27ae60; /* vert */
}Exemple 2 : une galerie d’images simple
Imaginons que vous vouliez créer une galerie de photos où chaque image a une hauteur différente. Avec une grille classique, les différences de hauteur créeraient des trous, mais avec display: masonry, tout s’emboîte naturellement.
Voici le code HTML de base :
<div class="gallery">
<img src="photo1.jpg" alt="Photo 1">
<img src="photo2.jpg" alt="Photo 2">
<img src="photo3.jpg" alt="Photo 3">
<img src="photo4.jpg" alt="Photo 4">
<img src="photo5.jpg" alt="Photo 5">
</div>Et le CSS associé :
.gallery {
display: masonry;
column-gap: 15px;
row-gap: 15px;
}
.gallery img {
width: 100%;
border-radius: 8px;
display: block;
}Dans cet exemple, la galerie adoptera automatiquement une disposition en colonnes fluides. Chaque image garde sa hauteur d’origine, mais vient s’imbriquer harmonieusement dans la colonne. Le rendu final ressemble à ce que l’on trouve sur Pinterest.
Exemple 3 : un mur d’articles de blog
Le masonry n’est pas réservé aux images. Vous pouvez aussi l’utiliser pour afficher une série d’articles avec des extraits de textes plus ou moins longs.
HTML :
Des formations informatique pour tous !
Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…
Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.
Découvrez mes formations Qui suis-je ?<div class="articles">
<article>
<h2>Titre 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
<article>
<h2>Titre 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum facilisis magna.</p>
</article>
<article>
<h2>Titre 3</h2>
<p>Nulla facilisi. Suspendisse potenti. Donec et venenatis nunc.</p>
</article>
</div>CSS :
.articles {
display: masonry;
column-gap: 20px;
row-gap: 20px;
}
.articles article {
background: #f5f5f5;
padding: 15px;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}Le rendu final présente vos articles sous forme de cartes, organisées de façon fluide, avec un style moderne et agréable à parcourir.
Rendre le masonry responsive
Dans le développement web moderne, il est impossible d’ignorer la question du responsive design. Vos visiteurs naviguent sur des écrans très variés : ordinateurs, tablettes, téléphones. Il est donc indispensable que le masonry s’adapte correctement à chaque situation.
Heureusement, comme il repose sur une logique de colonnes, le display: masonry est naturellement flexible. Mais pour obtenir un rendu optimal, il est conseillé de combiner son utilisation avec les media queries.
Exemple de base avec media queries
Imaginons que vous vouliez afficher :
- trois colonnes sur les grands écrans,
- deux colonnes sur les tablettes,
- et une seule colonne sur les téléphones.
Voici un exemple simple :
.gallery {
display: masonry;
column-gap: 20px;
row-gap: 20px;
}
@media (max-width: 1024px) {
.gallery {
column-count: 2;
}
}
@media (max-width: 600px) {
.gallery {
column-count: 1;
}
}Dans ce code, la galerie adopte automatiquement une disposition adaptée à la largeur de l’écran. L’utilisation de column-count en complément du masonry permet de mieux contrôler le nombre de colonnes.
Exemple avancé : ajuster la taille des cartes
Supposons que vous affichiez des articles de blog en masonry. Sur un grand écran, les cartes peuvent avoir une largeur de 300 pixels, mais sur mobile, il serait plus logique de les afficher en pleine largeur.
HTML :
<div class="articles">
<article>
<h2>Titre 1</h2>
<p>Texte court pour illustrer l’exemple.</p>
</article>
<article>
<h2>Titre 2</h2>
<p>Texte un peu plus long afin de montrer la différence.</p>
</article>
</div>CSS :
.articles {
display: masonry;
column-gap: 20px;
row-gap: 20px;
}
.articles article {
background: #ffffff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
width: 300px;
}
@media (max-width: 768px) {
.articles article {
width: 100%;
}
}Avec ce réglage, vos cartes s’ajustent automatiquement à la largeur disponible sur mobile, garantissant un affichage clair et agréable grâce aux média query.
L’importance des espacements
Quand vous rendez le masonry responsive, les espacements jouent un rôle clé. Sur petit écran, un column-gap trop grand peut donner une impression de déséquilibre. N’hésitez pas à adapter aussi ces valeurs selon la taille de l’écran.
@media (max-width: 600px) {
.gallery {
column-gap: 10px;
row-gap: 10px;
}
}De cette manière, la mise en page reste légère et bien proportionnée, même sur les écrans les plus étroits.
Les navigateurs non compatibles
Comme nous l’avons vu plus haut, le support du display: masonry est encore limité. Il est donc indispensable de prévoir des alternatives si vous souhaitez proposer un rendu similaire à tous vos visiteurs. Heureusement, plusieurs solutions existent.
Utiliser les colonnes CSS (column-count et column-gap)
Avant même l’arrivée de display: masonry, il était déjà possible d’obtenir un effet similaire en utilisant les colonnes CSS. Avec column-count, vous définissez combien de colonnes doit comporter votre conteneur, et le navigateur répartit automatiquement les éléments dedans.
Exemple :
.gallery {
column-count: 3;
column-gap: 20px;
}
.gallery img {
width: 100%;
display: block;
margin-bottom: 20px;
border-radius: 6px;
}Dans ce cas, vos images se répartissent en colonnes et se placent naturellement les unes sous les autres, créant un effet masonry. La principale différence est que vous perdez un peu de contrôle sur l’ordre de lecture, mais le rendu visuel reste très proche.
Utiliser Grid avec grid-auto-flow: dense
CSS Grid peut également être détourné pour simuler un masonry. En utilisant grid-auto-flow: dense, vous demandez au navigateur de remplir automatiquement les trous laissés dans la grille.
Exemple :
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-flow: dense;
gap: 15px;
}
.gallery img {
width: 100%;
border-radius: 6px;
display: block;
}Ici, la grille va chercher à occuper au maximum l’espace disponible, en réorganisant les éléments. Ce n’est pas un vrai masonry car l’empilement vertical reste limité, mais l’effet visuel est assez proche et mieux contrôlé que les colonnes CSS.
Recourir à JavaScript et aux bibliothèques spécialisées
Si vous voulez une solution robuste et compatible sur tous les navigateurs, les bibliothèques JavaScript restent une valeur sûre. L’une des plus célèbres est Masonry.js, qui a longtemps été la référence pour ce type de mise en page.
Un exemple d’utilisation basique :
<div class="grid">
<div class="grid-item">Élément 1</div>
<div class="grid-item">Élément 2</div>
<div class="grid-item">Élément 3</div>
</div>
<script src="masonry.pkgd.min.js"></script>
<script>
var elem = document.querySelector('.grid');
var msnry = new Masonry(elem, {
itemSelector: '.grid-item',
columnWidth: 200,
gutter: 20
});
</script>Avec cette approche, vous obtenez un vrai effet masonry, mais vous devez charger un script supplémentaire, ce qui alourdit légèrement votre site.
La stratégie du progressive enhancement
La meilleure méthode consiste à utiliser display: masonry lorsque le navigateur le supporte, et à fournir une alternative simple (colonnes ou grid) pour les autres. C’est ce qu’on appelle le progressive enhancement.
Vous pouvez tester si le navigateur reconnaît masonry grâce à la règle CSS @supports.
Exemple :
.gallery {
column-count: 3;
column-gap: 20px;
}
@supports (display: masonry) {
.gallery {
display: masonry;
column-gap: 20px;
row-gap: 20px;
}
}Dans ce code, si le navigateur comprend display: masonry, il applique la version moderne. Sinon, il garde le rendu en colonnes, qui reste visuellement correct.
Comprendre la propriété masonry-auto-flow
La propriété masonry-auto-flow est encore expérimentale et fait partie du module CSS Grid & Masonry en cours de standardisation. Elle permet de préciser comment les éléments d’un conteneur masonry doivent s’organiser lorsqu’ils sont ajoutés.
Les valeurs possibles
Actuellement, les valeurs principales de masonry-auto-flow sont :
row: Les éléments se placent en remplissant les colonnes de gauche à droite, mais en suivant l’ordre horizontal des lignes. Cela ressemble à un flux classique de typegrid.column: Les éléments se placent verticalement, remplissant la première colonne avant de passer à la suivante. C’est le comportement par défaut que l’on attend du masonry, avec un effet de cascade.dense(oupacked) : Cette valeur demande au moteur CSS de tenter de combler les “trous” laissés par des éléments de hauteur différente. Par exemple, si une colonne est plus courte qu’une autre, le navigateur va placer un élément plus petit pour remplir l’espace vide.
Note : Le comportement exact peut varier selon les navigateurs et le support expérimental.
Exemple pratique
Imaginons une galerie d’articles avec différentes hauteurs.
HTML :
<div class="articles">
<article>Article 1</article>
<article>Article 2 avec un texte plus long</article>
<article>Article 3</article>
<article>Article 4 avec un texte encore plus long pour tester l’effet</article>
</div>CSS :
.articles {
display: masonry;
column-gap: 20px;
row-gap: 20px;
masonry-auto-flow: column; /* Remplissage vertical classique */
}
.articles article {
background: #f0f0f0;
padding: 15px;
border-radius: 8px;
}Dans cet exemple, chaque article se place verticalement dans la colonne la plus à gauche disponible.
Si vous remplacez masonry-auto-flow: column; par masonry-auto-flow: dense; :
.articles {
display: masonry;
column-gap: 20px;
row-gap: 20px;
masonry-auto-flow: dense;
}Alors le navigateur tentera de combler les espaces vides. Les articles plus petits vont se glisser dans les “trous” laissés par les éléments plus hauts, ce qui rend la disposition encore plus compacte et harmonieuse.
Pourquoi utiliser masonry-auto-flow ?
Cette propriété est particulièrement utile dans les situations suivantes :
- Optimisation de l’espace vertical : Pour éviter les gros espaces blancs dans votre grille.
- Ordre de lecture personnalisé : Si vous voulez contrôler l’ordre horizontal ou vertical dans lequel les éléments apparaissent.
- Gestion de contenus dynamiques : Sur un site qui récupère des articles ou images depuis une base de données, le dense packing permet un rendu toujours compact sans intervention côté JavaScript.
En résumé,
masonry-auto-flowvous donne un contrôle plus fin sur le comportement des colonnes et l’optimisation de l’espace, ce qui est un des points forts du masonry CSS.
