Publié le 23 juillet 2025
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 dans Chrome et Edge 140.
Comme il reste des problèmes ouverts concernant la spécification et la syntaxe de la mise en page en maçonnerie CSS, vos commentaires sont essentiels pour nous aider à définir la forme finale de l'API. Essayez cette fonctionnalité et dites-nous ce que vous en pensez.
Tester CSS Masonry dans Chromium dès aujourd'hui
Pour tester CSS Masonry dès aujourd'hui :
- Utilisez Chrome ou Edge 140 ou version ultérieure (ou un autre navigateur basé sur Chromium avec une version correspondante).
- Accédez à
about:flagsdans un nouvel onglet. - Recherchez "CSS Masonry Layout".
- Activez le flag.
- Redémarrez le navigateur.
Une fois la fonctionnalité activée, vous pouvez la voir en action en consultant les démos Microsoft Edge (consultez le code source des démos) ou continuez à lire pour en savoir plus sur la fonctionnalité et la syntaxe disponible.
Qu'est-ce que la maçonnerie ?
La mise en page CSS en maçonnerie est un mode de mise en page qui vous permet de créer un arrangement d'éléments en forme de briques, d'une manière qui n'est pas facilement réalisable avec la grille CSS, Flexbox ou la mise en page multicolonne.
La mise en page en maçonnerie CSS permet d'organiser les éléments dans un format de colonne ou de ligne, les éléments étant placés de manière réduite dans ces colonnes ou lignes.
Considérez la mise en page en 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 tentent toujours d'être au plus près de leur destination, qui est le début de la mise en page en maçonnerie.
Vos éléments de mise en page ne sont contraints que dans une seule direction et peuvent respirer librement dans l'autre, indépendamment des autres éléments proches. La maçonnerie est différente de la grille en ce sens que ses pistes ne sont définies que dans une seule direction.
Dans la maçonnerie, l'ordre visuel des éléments est moins important que la conception finale. La mise en page en mosaïque vous permet d'exploiter au mieux l'espace disponible, quels que soient les éléments dont vous disposez. C'est donc un excellent choix pour les pages qui sont très visuelles et où l'ordre visuel du contenu n'est pas aussi important que le résultat final.
Un aspect intéressant de la mise en page en 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 à occuper le plus d'espace disponible possible.
Ce comportement de placement automatique peut générer des résultats très intéressants, que les concepteurs Web tentent d'obtenir depuis longtemps. Pour obtenir un exemple, consultez la démonstration de la galerie photo de New York. Elle 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 mise en page en maçonnerie.
Mise en page d'un blog affichant la vignette et la description de chaque article.
Site d'actualités où les articles apparaissent dans des colonnes, certains étant plus larges que d'autres, et où les images de héros s'étendent sur 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, cette méthode peut présenter des inconvénients, par exemple :
- Performances médiocres : s'appuyer sur des bibliothèques JavaScript ou du code personnalisé pour imiter la mise en page en maçonnerie CSS présente des inconvénients en termes de performances, ce qui peut entraîner une expérience utilisateur négative.
- Complexité du code plus élevée :
- Il est difficile de garantir le bon emplacement des éléments et la bonne répartition de l'espace dans une grille CSS, une mise en page flexible ou une mise en page multicolonne afin d'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 des complexités et des limites.
- Charge de maintenance plus importante : il est plus difficile de gérer un code CSS ou JavaScript personnalisé complexe.
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. Toutefois, il ne présente pas les mêmes caractéristiques que la maçonnerie.
Dans la 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 d'empacter des éléments le long de l'un des axes, mais que les éléments ne sont pas dimensionnés pour s'adapter à leurs cellules respectives, vous devrez choisir entre laisser des espaces entre les éléments ou les étirer pour remplir l'espace vide.
Comme la mise en page en maçonnerie, Flexbox ne se soucie que d'une seule direction et laisse les éléments décider de l'espace qu'ils souhaitent occuper dans l'autre direction. Cela signifie que vous pouvez obtenir une mise en page de type masonry à l'aide de flexbox, à condition que les éléments soient disposés dans le sens du bloc, une colonne à la fois. Le conteneur Flex aura également besoin d'une taille de bloc ou d'une hauteur définies pour que les éléments s'enroulent sur une nouvelle ligne Flex, créant ainsi une nouvelle colonne.
La mise en page multicolonne peut également créer une mise en page de type maçonnerie, en réorganisant les éléments en colonnes. De plus, la mise en page multicolonne ne vous permet pas de dimensionner chaque colonne différemment. Elles ont toutes la même taille, tandis que la mise en page en maçonnerie offre beaucoup de flexibilité pour définir les pistes dans lesquelles les éléments sont placés.
Le but n'est pas de dire que les mises en page en grille, flexbox ou multicolonnes sont moins bonnes que la mise en page masonry. Il s'agit d'excellents types de mises en page qui peuvent être utilisés dans de nombreux cas. En d'autres termes, si vous souhaitez obtenir une mise en page en maçonnerie, c'est le CSS qui vous la fournira.
État de la mise en page en maçonnerie CSS
Le groupe de travail CSS rédige la maçonnerie dans la spécification CSS Grid Level 3. La spécification est encore en cours de développement et inclut temporairement deux syntaxes différentes proposées. La première utilise un nouveau mot clé pour la propriété display, tandis que dans la seconde, la maçonnerie est directement intégrée à la mise en page en grille CSS.
Utiliser display: masonry
Cette syntaxe introduit la mise en page en maçonnerie CSS comme son propre type display. Pour en savoir plus sur cette approche et sa motivation, consultez l'article de blog Comment définir la maçonnerie CSS ? Vos commentaires sont les bienvenus de l'équipe Google Chrome, ainsi que le reste de cet article. Le prototype actuel dans 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 sa motivation, consultez l'article WebKit Help us choose the final syntax for Masonry in CSS (Aidez-nous à choisir la syntaxe finale pour la mise en page en maçonnerie dans 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 posts des é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 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 en maçonnerie.
Bien que la syntaxe de la mise en page en maçonnerie CSS soit encore en discussion, notre implémentation de la fonctionnalité peut être testée dans Chromium dès aujourd'hui en activant le flag "CSS Masonry Layout" (Mise en page en maçonnerie CSS), comme expliqué dans Tester la mise en page en maçonnerie CSS dès aujourd'hui. Les exemples suivants montrent ce qui est disponible dans l'essai pour les développeurs.
Créer un conteneur de type masonry
Pour créer votre premier conteneur masonry 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 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 initiale de Google. Quel que soit le déclencheur utilisé pour CSS Masonry, le groupe de travail CSS a décidé de réutiliser les propriétés de dimensionnement et de placement des modèles de grille dans la mise en page CSS Masonry.
Bien que cela permette une plus grande réutilisation des propriétés entre les types de mise en page, vous pouvez trouver cela déroutant. N'hésitez pas à nous faire part de vos commentaires à ce sujet. Nous pouvons envisager de créer des alias plus génériques pour les 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 une grille, grid-template-columns et grid-template-rows sont définis par défaut sur none, ce qui, tel que défini actuellement, donne normalement une seule colonne ou ligne. Pour la mise en page en maçonnerie, cette valeur par défaut entraînerait le plus souvent une mise en page indésirable.
L'implémentation dans Chromium ajoute la nouvelle définition proposée pour none, qui remplacera la taille de piste par défaut dans la mise en page en maçonnerie CSS. La nouvelle taille de piste par défaut est la valeur repeat(auto-fill, auto). Cette valeur crée une belle mise en page en maçonnerie sans avoir à définir la taille des pistes :
.masonry {
display: masonry;
gap: 10px;
}
Comme le montre l'image, le conteneur masonry crée autant de colonnes de taille automatique que possible dans l'espace disponible.
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 maçonnerie CSS, cette restriction ne s'applique plus, car l'emplacement et la taille sont lié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 en maçonnerie.
Essayez la propriété abrégée masonry
Comme indiqué précédemment, l'implémentation actuelle dans Chromium s'appuie sur les propriétés grid-template-* pour définir la piste masonry dans votre mise en page.
Toutefois, comme la mise en page en 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 mise en page en maçonnerie et la définition de la piste en une seule fois, sans la propriété préfixée grid- qui prête à confusion.
Par exemple, les deux extraits de code suivants créeront des conteneurs 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"
}
L'abréviation masonry est toujours en cours de discussion par le groupe de travail CSS. Essayez-la dès aujourd'hui et dites-nous ce que vous en pensez.
Utiliser des tailles de pistes personnalisées
En ce qui concerne la définition de la taille des pistes, la mise en page en maçonnerie est aussi flexible que la mise en page en grille, ce qui vous permet d'ajuster le nombre et la taille des pistes de mise en page. Les pistes de maçonnerie ne doivent pas toutes 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 pistes de 3rem, suivies d'un nombre variable de pistes de 5rem, puis d'une seule piste de 12rem.
Couvrir plusieurs pistes
Dans une mise en page en maçonnerie, les éléments ne sont pas nécessairement contraints 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 fonctionnalité pour étendre certains éléments sur 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émo du site d'actualités utilise pour afficher l'annonce d'abonnement dans les articles.
Ajuster le placement des éléments de maçonnerie
Dans CSS Masonry, les éléments sont placés dans la colonne ou la ligne dont la position en cours 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 sera placé dans la deuxième colonne, où il sera 10 px plus près du début de la direction de maçonnerie.
Si vous considérez qu'une différence de 10 px dans la position d'exécution est suffisamment petite 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 source, utilisez la propriété item-tolerance.
La nouvelle propriété item-tolerance contrôle la sensibilité du placement 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 la spécification provisoire appelle cette propriété item-slack. Le groupe de travail CSS a récemment décidé d'utiliser item-tolerance comme nom. 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 de placement de modèle pour dimensionner et placer des éléments dans l'axe de grille d'un conteneur Masonry que pour la grille CSS, comme 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.
Appel à commentaires
Nous avons hâte que vous exploriez la mise en page en maçonnerie CSS, que vous fassiez preuve de créativité et que vous découvriez les nouvelles possibilités qu'elle peut vous offrir. Pour commencer, vous pouvez consulter nos démos et leur code source, puis commencer à créer vos propres exemples dans Chromium (n'oubliez pas d'activer d'abord le flag).
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 maçonnerie et dites-nous ce que vous en pensez.
Si vous avez des commentaires ou des suggestions 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 écrire un post sur votre propre blog ou sur les réseaux sociaux, n'oubliez pas de nous en informer sur X ou LinkedIn.
La mise en œuvre de la maçonnerie CSS est toujours en cours dans Chromium. Si vous le testez, sachez que nous y travaillons toujours activement et que vous pouvez rencontrer des cas où il ne se comporte pas comme prévu. Parmi les limites actuelles, on peut citer l'emballage dense, le placement inversé, la prise en charge des sous-grilles, la prise en charge hors flux, la prise en charge de la ligne de base, la prise en charge des outils de développement, la prise en charge de la fragmentation et la prise en charge de la décoration des espaces.
Si vous rencontrez un bug lors du test de la fonctionnalité, partagez vos commentaires en ouvrant un nouveau bug Chromium.