Brique par brique : aidez-nous à créer CSS Masonry

Patrick Brosset

Alison Maher

Publié le 23 juillet 2025, dernière mise à jour le 13 février 2026

Les équipes Microsoft Edge et Google Chrome sont heureuses d'annoncer que la mise en page CSS en maçonnerie est prête pour les premiers tests des développeurs à partir de Chrome et Edge 140.

Comme il reste des questions en suspens concernant la spécification et la syntaxe de la mise en page en mosaïque CSS, vos commentaires sont essentiels pour nous aider à finaliser la forme de l'API. Essayez cette fonctionnalité et donnez-nous votre avis.

Tester la mise en page Masonry CSS dans Chromium dès aujourd'hui

Pour tester CSS Masonry dès aujourd'hui :

1. Utilisez Chrome ou Edge 140 ou version ultérieure (ou un autre navigateur basé sur Chromium avec une version correspondante).
2. Accédez à about:flags dans un nouvel onglet.
3. Recherchez "CSS Masonry Layout".
4. Activez l'option.
5. Redémarrez le navigateur.

Une fois la fonctionnalité activée, vous pouvez la voir en action en consultant les démonstrations Microsoft Edge (consultez le code source des démonstrations) ou continuer à lire pour en savoir plus sur la fonctionnalité et la syntaxe disponible.

Qu'est-ce que la maçonnerie ?

La mise en page CSS Masonry est un mode de mise en page qui vous permet de créer une disposition d'éléments semblable à des briques, d'une manière qui n'est pas facilement réalisable avec une grille CSS, une flexbox ou une mise en page multicolonne.

La mise en page CSS Masonry peut être utilisée pour organiser les éléments dans un format de colonne ou de ligne, les éléments étant placés dans ces colonnes ou lignes de manière réduite.

Imaginez la maçonnerie comme une autoroute, où la seule contrainte est le nombre et la taille des différentes voies de circulation. Dans les voies, les véhicules peuvent prendre la longueur qu'ils souhaitent et essaient toujours d'être le plus près possible de leur destination, qui est le début de la mise en page en maçonnerie.

Les éléments de votre mise en page ne sont contraints que dans une seule direction et peuvent respirer librement dans l'autre, indépendamment des autres éléments à proximité. La mise en page en maçonnerie est différente de la mise en page en grille, car ses pistes ne sont définies que dans une seule direction.

Dans une grille asymétrique, l'ordre visuel des éléments est moins important que la conception finale. La mise en page Masonry vous permet d'exploiter au mieux l'espace disponible, quels que soient les éléments dont vous disposez. Il s'agit donc d'un excellent choix pour les pages visuellement intensives, où l'ordre visuel du contenu n'a pas autant d'importance que le résultat final.

Un aspect intéressant de la maçonnerie est qu'elle permet également aux éléments de s'étendre sur plusieurs pistes, tout comme avec la grille. Dans ce cas, les éléments continuent d'être placés de manière à remplir autant d'espace disponible que possible.

Ce comportement de placement automatique peut donner des résultats très intéressants, que les concepteurs Web essaient d'obtenir depuis longtemps. Pour voir un exemple, consultez la démo de la galerie photo de New York, qui montre comment les photos peuvent être affichées de manière compacte sur plusieurs colonnes, tout en permettant à certains éléments (le titre dans cet exemple) de s'étendre sur plusieurs colonnes :

Voici quelques autres exemples d'utilisation de la maçonnerie.

Une mise en page de blog, affichant la miniature et la description de chaque article.

Un site d'actualités, où les articles apparaissent dans des colonnes, certains étant plus larges que d'autres, et où les images héros occupent toute la largeur de la page.

Collection de photos, avec différentes tailles de colonnes, et certaines photos s'étendant sur plusieurs colonnes.

Solutions de contournement et leurs limites

Pour implémenter ce modèle de conception sur le Web aujourd'hui, vous devez utiliser des bibliothèques JavaScript ou des solutions de contournement qui utilisent la grille CSS, Flexbox ou plusieurs colonnes. Toutefois, cela peut présenter des inconvénients, notamment :

• Performances moindres : l'utilisation de bibliothèques JavaScript ou de code personnalisé pour imiter la mise en page en mosaïque CSS entraîne des compromis en termes de performances, ce qui peut nuire à l'expérience utilisateur.
• Complexité du code plus élevée :
  • Il est difficile de garantir le bon placement des éléments et la répartition de l'espace dans une grille CSS, une flexbox ou une mise en page multicolonne pour imiter une mise en page CSS en maçonnerie.
  • La gestion de fonctionnalités spécifiques telles que les éléments qui s'étendent sur plusieurs colonnes ou lignes, l'ordre personnalisé des éléments ou l'ajustement à la fenêtre d'affichage peut également entraîner une complexité et des limites.
• Charge de maintenance plus importante : le code CSS ou JavaScript personnalisé complexe est plus difficile à gérer.

La grille CSS est un mode de mise en page incroyable, très flexible, qui vous permet de créer de nombreux styles de mise en page différents, que ce soit pour une page Web entière, un composant ou simplement pour aligner des éléments individuels. Cependant, il n'a pas les mêmes caractéristiques que la maçonnerie.

Dans une grille CSS, les lignes et les colonnes sont définies de manière rigide, et les éléments ne peuvent exister que dans les cellules de la grille. Si vous essayez de regrouper des éléments le long d'un des axes, mais que leur taille n'est pas adaptée à leurs cellules respectives, vous devrez choisir entre laisser des espaces entre les éléments ou les étirer pour remplir l'espace vide.

Tout comme la maçonnerie, Flexbox ne se soucie que d'une seule direction et permet aux éléments de décider de l'espace qu'ils souhaitent occuper dans l'autre direction. Cela signifie que vous pouvez obtenir une mise en page qui ressemble à une mise en page de maçonnerie à l'aide de Flexbox, à condition que les éléments soient disposés dans la direction du bloc, une colonne à la fois. Le conteneur Flex aura également besoin d'une taille de bloc ou d'une hauteur définie pour que les éléments soient encapsulés sur une nouvelle ligne Flex, créant ainsi une colonne.

La mise en page multicolonne peut également créer une mise en page qui ressemble à de la maçonnerie, en organisant à nouveau les éléments en colonnes. De plus, la mise en page multicolonne ne vous permet pas de dimensionner différemment chacune des colonnes. Ils sont tous de la même taille, tandis que la maçonnerie offre une grande flexibilité pour définir les pistes dans lesquelles les éléments sont emballés.

Le point à retenir ici n'est pas que la grille, la flexbox ou les mises en page multicolonnes sont moins bonnes que la mise en page en maçonnerie. Ce sont d'excellents types de mises en page qui ont de nombreux cas d'utilisation. En résumé, si vous souhaitez une mise en page en maçonnerie, la maçonnerie CSS est ce qu'il vous faut.

État de la maçonnerie CSS

Le groupe de travail CSS rédige la spécification de la mise en page en maçonnerie dans CSS Grid Level 3. La spécification est toujours en cours de développement et inclut temporairement deux syntaxes proposées différentes. La première utilise un nouveau mot clé pour la propriété display, tandis que dans la seconde, la disposition en maçonnerie est directement intégrée à la mise en page de la grille CSS.

Utiliser display: masonry

Cette syntaxe introduit la mise en page en mosaïque CSS en tant que type display propre. Pour en savoir plus sur l'approche et ses motivations, consultez l'article de blog Feedback needed: How should we define CSS masonry? (Commentaires nécessaires : comment définir la maçonnerie CSS ?) de l'équipe Google Chrome, ainsi que la section restante de cet article. Le prototype actuel de Chromium est basé sur cette proposition.

display: grid; grid-template-*: masonry;

Dans cette syntaxe, la mise en page en maçonnerie CSS est directement intégrée à la grille CSS. Le mode masonry est déclenché en appliquant le mot clé masonry à la définition grid-template-columns dans le cas d'une mise en page masonry basée sur des lignes, ou à la définition grid-template-rows dans le cas d'une mise en page masonry basée sur des colonnes.

Pour en savoir plus sur cette proposition et ses motivations, consultez l'article WebKit Help us choose the final syntax for Masonry in CSS (Aidez-nous à choisir la syntaxe finale pour Masonry en CSS).

Notez qu'une alternative à cette proposition est la propriété item-pack et le mot clé collapse, qui déclencheraient la maçonnerie CSS au lieu d'utiliser l'une des deux propriétés de modèle de grille.

Depuis la publication des articles par les équipes Chrome et WebKit, le CSSWG a poursuivi les discussions sur la syntaxe globale à adopter. Vos commentaires peuvent nous aider à améliorer ces forums.

Pour en savoir plus sur l'état actuel des discussions, consultez le problème 11593, qui décrit l'ensemble actuel des sujets de discussion sur la syntaxe de la maçonnerie, et le problème 11243 pour un résumé du débat sur la syntaxe jusqu'à présent.

Créer votre propre mise en page en maçonnerie CSS

Amusons-nous un peu et créons une mise en page CSS de type Masonry.

Bien que la syntaxe de la mise en page en mosaïque CSS soit encore en cours de discussion, notre implémentation de la fonctionnalité peut être testée dès aujourd'hui dans Chromium en activant l'indicateur "CSS Masonry Layout", comme expliqué dans Tester la mise en page en mosaïque CSS dès aujourd'hui. Les exemples suivants montrent ce qui est disponible dans la version d'essai pour les développeurs.

Créer un conteneur de maçonnerie

Pour créer votre premier conteneur de maçonnerie basé sur des colonnes, utilisez display:masonry et définissez la taille de vos colonnes à l'aide de grid-template-columns. Comme masonry-direction est défini par défaut sur column, la définition de cette propriété est facultative.

.masonry {
  display: masonry;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

Pour un conteneur de type masonry basé sur des lignes, utilisez plutôt display:masonry, définissez la taille de vos lignes à l'aide de grid-template-rows, puis définissez masonry-direction:row.

.masonry {
 display: masonry;
 masonry-direction: row;
 grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
 gap: 10px;
}

Comme vous l'avez peut-être remarqué, cette syntaxe diffère légèrement de la proposition d'origine de Google. Quel que soit le déclencheur utilisé pour la mise en page Masonry CSS, le groupe de travail CSS a décidé de réutiliser les propriétés de dimensionnement et d'emplacement du modèle de grille dans la mise en page Masonry CSS.

Bien que cela permette une plus grande réutilisation des propriétés entre les types de mise en page, vous pourriez trouver cela déroutant. Nous aimerions connaître votre avis à ce sujet. Nous pourrions envisager de créer des alias plus génériques pour des propriétés telles que grid-template-columns et grid-template-rows, comme template-columns ou template-rows, qui pourraient être utilisés à la fois pour la grille et la maçonnerie.

Utiliser la taille de piste par défaut

Un nouveau type d'affichage est l'occasion de repenser les valeurs par défaut des propriétés.

Dans la grille, grid-template-columns et grid-template-rows sont définis par défaut sur none, ce qui, tel qu'il est actuellement défini, donne normalement une seule colonne ou ligne. Pour la maçonnerie, cette valeur par défaut entraînerait, la plupart du temps, une mise en page indésirable.

L'implémentation dans Chromium ajoute la définition proposée récemment pour none, qui remplacera la taille de piste par défaut dans la mise en page Masonry CSS. Cette nouvelle taille de piste par défaut est la valeur repeat(auto-fill, auto). Cette valeur crée une mise en page en maçonnerie agréable sans avoir à définir de tailles de pistes :

.masonry {
  display: masonry;
  gap: 10px;
}

Comme illustré dans l'image, le conteneur de maçonnerie crée autant de colonnes de taille automatique que l'espace disponible le permet.

Avec la grille CSS, tous les éléments sont placés avant que les pistes ne soient dimensionnées, ce qui signifie que cette définition de dimensionnement automatique des pistes n'est pas possible. Toutefois, avec la mise en page en mosaïque CSS, cette restriction ne s'applique plus, car l'emplacement et le dimensionnement sont entrelacés et simplifiés. Cette restriction étant levée, nous pouvons fournir une taille de piste par défaut plus utile pour les mises en page de type "masonry".

Essayer la propriété abrégée masonry

Comme indiqué précédemment, l'implémentation actuelle dans Chromium repose sur les propriétés grid-template-* pour définir la piste de maçonnerie dans votre mise en page. Toutefois, comme la maçonnerie n'a qu'une seule dimension, nous avons également implémenté la propriété abrégée masonry, que vous pouvez utiliser pour définir à la fois la direction de la maçonnerie et la définition de la piste en une seule fois, sans la propriété préfixée grid-, qui peut prêter à confusion.

Par exemple, les deux extraits de code suivants créent des conteneurs de maçonnerie CSS équivalents.

.masonry {
 display: masonry;
 masonry: "a a b" 50px 100px 200px row;
}

.masonry {
  display: masonry;
  masonry-direction: row;
  grid-template-rows: 50px 100px 200px;
  grid-template-areas: "a" "a" "b"
}

La propriété abrégée masonry est toujours en cours de discussion par le groupe de travail CSS. Essayez-le dès aujourd'hui et donnez-nous votre avis.

Optez pour des tailles de pistes personnalisées

Pour définir la taille des pistes, la mise en page en maçonnerie est aussi flexible que la mise en page en grille, car elle vous permet d'ajuster le nombre et la taille des pistes de mise en page. Les pistes de maçonnerie n'ont pas toutes besoin d'avoir la même taille, par exemple :

.masonry {
 display: masonry;
 masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}

Dans cet exemple, nous définissons deux premières pistes de 3 rem, suivies d'un nombre variable de pistes de 5 rem, puis d'une seule piste de 12 rem.

Couvrir plusieurs canaux

Dans une mise en page en mosaïque, les éléments ne doivent pas nécessairement être limités aux pistes dans lesquelles ils sont placés, car ils peuvent s'étendre sur plusieurs pistes si nécessaire. Cela peut être très utile lorsque certains éléments sont plus importants que d'autres et nécessitent plus d'espace.

Exemple :

.masonry {
  display: masonry;
  masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.important-item {
  grid-column: span 2;
}

Vous pouvez également utiliser cette capacité à s'étendre sur plusieurs pistes pour que certains éléments occupent toute la longueur du conteneur :

.masonry {
 display: masonry;
 masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.full-bleed {
 grid-column: 1 / -1;
}

C'est ce que la démonstration du site d'actualités utilise pour afficher l'annonce d'abonnement dans les articles.

Ajustement de l'emplacement des éléments de maçonnerie

Dans CSS Masonry, les éléments sont placés dans la colonne ou la ligne dont la position d'exécution est la plus courte.

Imaginez un conteneur de maçonnerie à deux colonnes. Si le conteneur comporte un élément de 110 px de haut dans la première colonne et un élément de 100 px de haut dans la deuxième colonne, un troisième élément est placé dans la deuxième colonne, où il est 10 px plus proche du début de la direction de la maçonnerie.

Si vous considérez qu'une différence de 10 px dans la position d'exécution est suffisamment faible pour votre cas et que vous préférez que le troisième élément soit placé dans la première colonne pour mieux correspondre à l'ordre de la source, utilisez la propriété item-tolerance.

La nouvelle propriété item-tolerance contrôle la sensibilité de l'emplacement des éléments.

Dans l'exemple précédent, vous pouvez appliquer item-tolerance: 10px; à votre conteneur pour personnaliser la variabilité de l'emplacement des éléments :

.masonry {
  display: masonry;
  masonry: 200px 200px;
  gap: 10px;
  item-tolerance: 10px;
}

Notez que le brouillon de la spécification appelle cette propriété item-slack. Le groupe de travail CSS a récemment décidé d'utiliser item-tolerance à la place, et la spécification sera bientôt mise à jour.

Autres propriétés disponibles

Vous pouvez utiliser les mêmes propriétés de dimensionnement et d'emplacement de modèle pour dimensionner et placer des éléments dans l'axe de la grille d'un conteneur de maçonnerie que pour la grille CSS, par exemple grid-row, grid-column, grid-area, grid-template-areas ou order. Exploitez tout le potentiel de la grille CSS lorsque vous créez votre mise en page en maçonnerie.

Demande de commentaires

Nous avons hâte que vous exploriez la mise en page CSS en maçonnerie, que vous fassiez preuve de créativité et que vous découvriez les nouvelles fonctionnalités qu'elle peut vous aider à débloquer. Pour commencer, nous vous recommandons de consulter nos démonstrations et leur code source, puis de créer vos propres exemples dans Chromium (n'oubliez pas d'activer l'indicateur au préalable).

Vos commentaires sont importants pour nous aider à façonner l'API et à vérifier qu'elle est conçue pour répondre à vos besoins sur le Web. Essayez la mise en page en mosaïque et donnez-nous votre avis.

Si vous avez des commentaires ou des remarques sur la forme de l'API, n'hésitez pas à nous en faire part en commentant le problème 11243. Si vous préférez rédiger un article sur votre propre blog ou sur les réseaux sociaux, n'oubliez pas de nous en informer sur X ou LinkedIn.

La maçonnerie CSS est toujours en cours d'implémentation dans Chromium. Si vous le testez, sachez que nous y travaillons encore activement et que vous pouvez rencontrer des cas où il ne se comporte pas comme prévu. Certaines des limites actuelles incluent, entre autres, l'empaquetage dense, l'emplacement inversé, la compatibilité avec les sous-grilles, la compatibilité avec les flux hors flux, la compatibilité avec les lignes de base, la compatibilité avec les outils de développement, la compatibilité avec la fragmentation et la compatibilité avec la décoration des espaces.

Si vous trouvez un bug lors du test de la fonctionnalité, partagez vos commentaires en ouvrant un nouveau bug Chromium.