Publié le 19 septembre 2024, dernière mise à jour le 13 février 2026
Le groupe de travail CSS a combiné les deux propositions de maçonnerie CSS en une spécification provisoire. Le groupe espère que cela facilitera la comparaison des deux et la prise de décision finale. L'équipe Chrome estime toujours qu'une syntaxe de maçonnerie distincte serait la meilleure solution. Bien que le principal problème de performances mentionné dans notre précédent article soit résolu, des inquiétudes subsistent concernant la syntaxe, les valeurs initiales et la facilité d'apprentissage d'une version combinée à la grille.
Toutefois, pour tester nos hypothèses, nous avons examiné quelques exemples pour montrer comment la mise en forme en maçonnerie fonctionnerait avec chaque version. Consultez les exemples de ce post et faites-nous part de vos commentaires afin que nous puissions prendre une décision et déployer cette fonctionnalité.
Cet article ne couvre pas tous les cas d'utilisation possibles, mais il est clair que la séparation de la mise en page en maçonnerie de la mise en page en grille n'entraînera pas un manque de fonctionnalités. En fait, c'est peut-être le contraire qui est vrai. Comme vous le verrez dans cet article, la version display: masonry offre de nouvelles opportunités et une syntaxe plus simple.
De plus, de nombreux développeurs ont exprimé des inquiétudes quant au potentiel de réorganisation des éléments avec la mise en page en maçonnerie, qui pourrait entraîner des problèmes d'accessibilité. Ce problème est également résolu pour les deux versions de la syntaxe, grâce à la propriété reading-flow proposée.
Mise en page Masonry de base
Il s'agit de la mise en page que la plupart des gens imaginent lorsqu'ils pensent à la maçonnerie. Les éléments s'affichent sur des lignes. Une fois la première ligne placée, les éléments suivants se déplacent dans l'espace laissé par les éléments plus courts.
Avec display: masonry
Pour créer une mise en page en maçonnerie, utilisez la valeur masonry pour la propriété display. Cela crée une mise en page en maçonnerie avec des pistes de colonnes que vous définissez (ou qui sont définies par le contenu) et une mise en page en maçonnerie sur l'autre axe. Le premier élément est affiché au début du bloc et de la ligne (donc en haut à gauche en français), et les éléments sont disposés dans le sens de la ligne.
Pour définir des pistes, utilisez masonry-template-tracks avec les valeurs de liste de pistes telles qu'elles sont utilisées dans la mise en page en grille CSS.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
gap: 10px;
}
Avec display: grid
Pour créer une mise en page en maçonnerie, commencez par créer une mise en page en grille en utilisant la valeur grid pour la propriété display. Définissez les colonnes avec la propriété grid-template-columns, puis attribuez à grid-template-rows la valeur masonry.
Cela créera une mise en page comme prévu avec des éléments de grille placés automatiquement. Toutefois, les éléments de chaque ligne utilisent une mise en page en maçonnerie et se réorganiseront pour occuper l'espace laissé par les éléments plus petits de la ligne précédente.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 10px;
}
Points à prendre en compte pour choisir entre les deux options
Une différence notable entre ces méthodes est qu'avec la version display: masonry, vous obtenez une mise en page en maçonnerie même si vous ne spécifiez aucune piste avec masonry-template-tracks. Par conséquent, display: masonry peut suffire.
En effet, la valeur initiale de masonry-template-tracks est repeat(auto-areas, auto). La mise en page crée autant de pistes de taille automatique que possible dans le conteneur.
Flux inversé avec masonry
La spécification inclut des méthodes permettant de modifier la direction du flux masonry. Par exemple, vous pouvez modifier le flux pour qu'il s'affiche de la fin du bloc vers le haut.
Avec display: masonry
Créez une mise en page en maçonnerie avec display: masonry, puis utilisez masonry-direction avec la valeur column-reverse.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
masonry-direction: column-reverse;
}
Avec display: grid
Créez une mise en page en maçonnerie avec display: grid et grid-template-rows: masonry.
Utilisez ensuite la propriété grid-auto-flow avec une nouvelle valeur de row-reverse pour que les éléments soient disposés à partir de la fin du bloc du conteneur de grille.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
grid-auto-flow: row-reverse;
}
Points à prendre en compte pour choisir entre les deux options
La version display: masonry ressemble beaucoup au fonctionnement de flexbox. Modifiez le sens de flux des colonnes à l'aide de la propriété masonry-direction avec la valeur column-reverse.
La version CSS Grid utilise grid-auto-flow. Tels qu'ils sont actuellement définis, grid-auto-flow: row-reverse et grid-auto-flow: column-reverse auraient le même effet. Cela peut être déroutant, car vous vous attendez peut-être à ce qu'ils fassent autre chose.
Masonry pour les lignes
Vous pouvez également changer de direction pour définir des lignes.
Avec display: masonry
Créez une mise en page en maçonnerie avec display: masonry, puis définissez la valeur de masonry-direction sur row. Sauf si vous souhaitez que vos lignes aient une taille de bloc spécifique, vous n'avez pas besoin de spécifier de taille de piste, car la valeur par défaut est auto. Les pistes seront donc dimensionnées en fonction du contenu qu'elles contiennent.
.masonry {
display: masonry;
masonry-direction: row;
}
Avec display: grid
.masonry {
display: grid;
grid-template-columns: masonry;
grid-template-rows: repeat(3, 1fr);
}
Points à prendre en compte pour choisir entre les deux options
Comme pour le flux inversé, le fait de modifier la version display: masonry des colonnes en lignes signifie que vous modifiez la valeur de masonry-direction. Avec la version grille, vous devrez inverser les valeurs des propriétés grid-template-columns et grid-template-rows. Si vous utilisez la forme abrégée, modifiez l'ordre de la syntaxe.
Dans ces deux exemples de flux de changement de compte, la version display: masonry semble plus intuitive. Il existe une seule propriété qui contrôle le flux masonry-direction. Elle accepte l'une des valeurs suivantes :
rowcolumnrow-reversecolumn-reverse
Vous ajoutez ensuite les informations de dimensionnement nécessaires à masonry-template-tracks, en supposant que la valeur automatique par défaut ne soit pas celle dont vous avez besoin.
Avec la grille, pour inverser le sens, vous devez utiliser la propriété grid-auto-flow. Pour inverser la maçonnerie de ligne, vous devez inverser la valeur des propriétés grid-template-*. Il n'est pas non plus possible, dans la syntaxe de grille actuelle, de laisser la valeur de l'axe de grille indéfinie. Vous devez toujours spécifier les propriétés grid-template-* sur l'axe dont la valeur n'est pas masonry.
Positionner des éléments
Dans les deux versions, vous pouvez positionner explicitement les éléments à l'aide du placement basé sur les lignes que vous connaissez déjà grâce à la mise en page en grille. Dans les deux versions, vous ne pouvez positionner les éléments que sur l'axe de la grille, c'est-à-dire l'axe avec les pistes prédéfinies. Vous ne pouvez pas positionner les éléments sur l'axe qui effectue la mise en page en maçonnerie.
Avec display: masonry
Le code CSS suivant définit une mise en page en maçonnerie avec quatre colonnes. L'axe de la grille est donc constitué de colonnes. L'élément avec une classe a est placé de la première à la troisième ligne de colonne, sur deux pistes avec les nouvelles propriétés masonry-track-*. Cela peut également être défini comme un raccourci de masonry-track: 1 / 3;.
.masonry {
display: masonry;
masonry-template-tracks: repeat(4, 1fr);
}
.a {
masonry-track-start: 1;
masonry-track-end: 3;
}
Avec display: grid
Le code CSS suivant définit une mise en page en maçonnerie avec quatre colonnes. L'axe de la grille est donc constitué de colonnes. L'élément avec une classe de a est placé de la première à la troisième ligne de colonne, couvrant deux pistes avec les propriétés grid-column-*. Cela peut également être défini comme un raccourci de grid-column: 1 / 3;.
Si l'axe de la grille est constitué de colonnes, les propriétés grid-row-* seront ignorées. Si l'axe de la grille est constitué de lignes, les propriétés grid-columns-* seront ignorées.
.masonry {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}
.a {
grid-column-start: 1;
grid-column-end: 3;
}
Vous pouvez utiliser des lignes nommées avec les deux syntaxes. Les exemples suivants montrent une grille avec deux lignes de colonnes nommées a.
Avec display: masonry
Les lignes nommées sont définies dans la valeur de la liste des titres de masonry-template-tracks. L'élément peut être placé après n'importe quelle ligne nommée a.
.masonry {
display: masonry;
masonry-template-tracks: 100px [a] auto [a] auto 100px;
}
.item {
masonry-track: a;
}
Avec display: grid
Les lignes nommées sont définies dans la valeur de la liste des titres de grid-template-columns. L'élément est placé après la première ligne nommée a. Si la propriété grid-row est définie, elle sera ignorée.
.masonry {
display: grid;
grid-template-columns: 100px [a] auto [a] auto 100px;
grid-template-rows: masonry;
}
.item {
grid-column: a;
grid-row: a; /* ignored */
}
Vous pouvez également utiliser des zones nommées dans les deux syntaxes. Les exemples suivants montrent une grille avec trois pistes nommées "a", "b" et "c".
Avec display: masonry
Les pistes sont nommées d'après la valeur de masonry-template-areas. Comme aucune taille de piste n'est définie, les trois pistes sont définies par défaut sur la taille auto. L'élément est placé sur la piste "a".
.masonry {
display: masonry;
masonry-template-areas: "a b c";
}
.item {
masonry-track: a;
}
Le fonctionnement est le même, que vous définissiez des lignes ou des colonnes. La seule différence est la propriété masonry-direction.
Avec display: grid
Pour les colonnes, la syntaxe est pratiquement identique. De même, comme aucune taille de piste n'est définie, les trois pistes sont définies par défaut sur la taille auto. Toutefois, vous devez toujours indiquer explicitement que l'autre axe est de type masonry :
.masonry {
display: grid;
grid-template-areas: "a b c";
grid-template-rows: masonry;
}
.item {
grid-column: a;
}
Pour les lignes, la valeur doit être écrite différemment, car grid-template-areas définit en fait une zone bidimensionnelle, et chaque ligne est écrite sous la forme d'une chaîne distincte :
.masonry {
display: grid;
grid-template-areas: "a" "b" "c"; /* Note the difference, each row is quoted. */
grid-template-columns: masonry;
}
.item {
grid-row: a;
}
Points à prendre en compte pour choisir entre les deux options
Quelle que soit la position, la syntaxe display: masonry fonctionne mieux pour changer de direction. Comme la propriété masonry-track-* fonctionne dans le sens de l'axe de la grille, il vous suffit de modifier la valeur de masonry-direction pour changer de sens. Avec la version grille, vous aurez au moins besoin de propriétés redondantes pour activer le changement. Toutefois, consultez les exemples précédents pour découvrir d'autres façons dont le changement de direction est plus compliqué avec la version en grille.
Raccourcis
Dans cet article, les formes longues ont été utilisées pour indiquer plus clairement les propriétés utilisées. Toutefois, les versions display: masonry et display: grid peuvent être définies à l'aide de formes abrégées.
Avec display: masonry
Le raccourci display: masonry utilise le mot clé masonry. Pour créer la mise en page masonry de base, utilisez le code CSS suivant :
.masonry {
display: masonry;
masonry: repeat(3, 1fr);
}
Pour créer une mise en page masonry simple basée sur des lignes :
.masonry {
display: masonry;
masonry: row;
}
Pour définir des pistes et une mise en page basée sur des lignes avec la forme abrégée :
.masonry {
display: masonry;
masonry: repeat(3, 1fr) row;
}
Avec display: grid
Pour créer la mise en page masonry de base à l'aide du raccourci grid.
.masonry {
display: grid;
grid: masonry / repeat(3, 1fr);
}
Pour créer une mise en page masonry simple basée sur des lignes :
.masonry {
display: grid;
grid: repeat(3, auto) / masonry;
}
Dans des exemples plus complexes, comme la syntaxe display:masonry globale est plus simple, davantage de propriétés peuvent être regroupées dans la forme abrégée sans devenir trop complexes.
Par exemple, imaginez que vous créez trois colonnes nommées "a", "b" et "c", remplies de bas en haut.
Avec display:masonry
Dans display: masonry, ces trois éléments peuvent être définis ensemble dans le format abrégé :
.masonry {
display: masonry;
masonry: column-reverse "a b c";
}
Comme elles sont dimensionnées automatiquement, vous n'avez pas besoin de spécifier les tailles. Toutefois, si vous souhaitez une taille spécifique, vous pouvez l'ajouter. Exemple :
masonry: column-reverse 50px 100px 200px "a b c";.
De plus, chaque composant peut être réorganisé librement. Il n'y a pas d'ordre spécifique à respecter. Si vous souhaitez effectuer des opérations sur les lignes, il vous suffit de remplacer column-reverse par row ou row-reverse. Le reste de la syntaxe reste le même.
Avec display: grid
Dans display: grid, ces trois aspects doivent être définis séparément :
.masonry {
display: grid;
grid-template-rows: masonry;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
Comme dans l'exemple de maçonnerie, cela définit la taille de toutes les colonnes sur auto. Toutefois, si vous souhaitez fournir des tailles explicites, vous pouvez le faire :
.masonry {
display: grid;
grid: masonry / 50px 100px 200px;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
Vous pouvez également utiliser "grid" pour définir les tailles et les noms de zones en même temps :
.masonry {
display: grid;
grid: "a b c" masonry / 50px 100px 200px;
grid-auto-flow: wrap-reverse;
}
Dans ces deux exemples, l'ordre est strictement requis et différent si vous souhaitez des lignes à la place. Par exemple, voici à quoi ressemble le passage aux lignes :
.masonry {
display: grid;
grid: 50px 100px 200px / masonry;
grid-template-areas: "a" "b" "c";
}
Ou, pour les regrouper en une seule abréviation :
.masonry {
display: grid;
grid: "a" 50px "b" 100px "c" 200px / masonry;
}
Points à prendre en compte pour choisir entre les deux options
L'abréviation display: masonry est susceptible d'être largement utilisée, car elle est relativement simple. Dans de nombreux cas, pour une mise en page en maçonnerie "standard", il vous suffit de définir les définitions de piste. Toutes les autres valeurs peuvent prendre la valeur par défaut.
La version display: grid utilise le raccourci grid existant, qui est un raccourci assez complexe et, d'après notre expérience, moins souvent utilisé par les développeurs. Comme le montrent les exemples précédents, même lorsqu'elle est utilisée pour des mises en page en maçonnerie simples, elle nécessite de faire attention lors de la définition de l'ordre des valeurs.
Autres points à noter
Cet article examine certains cas d'utilisation courants aujourd'hui, mais nous ne savons pas ce que l'avenir réserve aux grilles ou aux mises en page en maçonnerie. L'un des principaux arguments en faveur de l'utilisation de la syntaxe display: masonry distincte est qu'elle permet aux deux de diverger à l'avenir. En particulier avec les valeurs initiales, telles que celles de masonry-template-tracks, il peut être utile de faire quelque chose de différent dans masonry que dans grid. Nous ne pouvons pas modifier les valeurs par défaut de la grille si nous choisissons la version display: grid, ce qui pourrait limiter les actions que nous souhaiterons effectuer à l'avenir.
Dans ces exemples, vous pouvez voir les endroits où le navigateur doit ignorer les propriétés valides dans la grille si vous utilisez la mise en page en maçonnerie.
Par exemple, grid-template-areas, où la plupart des valeurs sont supprimées, car il définit une mise en page en grille bidimensionnelle. Dans la mise en page en maçonnerie, nous ne définissons qu'une seule direction.
Envoyer vos commentaires
Consultez ces exemples, ainsi que le brouillon de spécification qui présente chaque version côte à côte. N'hésitez pas à nous donner votre avis en commentant le problème 9041. Si vous préférez écrire un post sur votre propre blog ou sur les réseaux sociaux, n'oubliez pas de nous le signaler sur X ou LinkedIn.