Nous avons beaucoup parlé de la mise en page Masonry ici sur CSS-Tricks, il n’est donc pas nécessaire de vous rappeler les discussions bilatérales sur how to approach it, l’idée de l’utiliser as a new unifying layout concept, Or alternative approaches to making it work today.

Here's what you need to know: it will be display: grid-lanes.

Les premières discussions concernant Masonry ont commencé en 2017 lorsque Rachel Andrew a exprimé quelques préoccupations sur la façon de faire une mise en page Pinterest en maçonnerie. Rachel a dit qu’il semblait que la bonne approche devrait être une sorte de flexbox, mais ce n’était pas entièrement réalisable avec flexbox, car les éléments s’écouleraient plutôt de haut en bas plutôt qu’à travers chaque rangée:

<Actuellement, la méthode CSS la plus proche de ce type de mise en page consiste à utiliser multi-col, mais les éléments s’écoulent alors de haut en bas plutôt qu’à travers les lignes.

<Cela ressemble plus à un comportement de flexbox qu’à une grille, car la solution est largement basée sur la taille des éléments. J’ouvre cette page afin d’enregistrer la demande de fonctionnalité/le cas d’utilisation en vue d’une discussion future.

C’est ainsi que les discussions autour de la disposition en maçonnerie en CSS ont commencé au sein du W3C. Dans ce même fil de discussion GitHub, vous lirez que Tab Atkins-Bittner a partagé une&nbsp ; « hacky »Â façon de procéder avec CSS Grid.

Vous pouvez faire en sorte que la grille fasse de la maçonnerie si vous connaissez les hauteurs des éléments à l’avance. C’est un peu compliqué, mais vous réglez le conteneur de la grille sur grid: auto-flow dense 1px / ;, puis vous réglez chaque élément sur grid-row : span ;&nbsp ; (par exemple, si l’élément mesure 50px de haut, utilisez grid-row: span 50;).

La grille peut faire de Masonry si vous connaissez la hauteur des éléments à l’avance.

J’aime bien les astuces CSS astucieuses, mais vous savez ce que j’aime aussi ? Une solution CSS fonctionnelle qui facilite son utilisation par les débutants. Et non, malheureusement, nous ne pouvons pas utiliser grid-template-rows ou grid-template-columns, comme Nate Green l’a suggéré dans le même fil de discussion:

.figure-list {
display: grid; ;
grid-template-columns: 1fr 1fr 1fr ;
grid-template-rows: flow; ;
}

Atkins-Bittner a répondu:

Il n’y a pas de moyen « simple » d’adapter Grid à Masonry – tout cela impliquerait des modifications non triviales de l’algorithme de mise en page. Packery, en particulier, a vraiment besoin que les choses aient une largeur définie.

Ok, c’est très bien. Je suis sûr que vous vous dites aussi, « pourquoi ne pas créer une nouvelle propriété display "Why?" Well, Rachel a ajouté that:

Le fait est que nous ne pouvons pas créer une toute nouvelle valeur d’affichage pour chaque modèle de conception distinct.

Notez que toutes ces discussions ont eu lieu dès 2017, ce qui signifie que la maçonnerie est un objectif insaisissable depuis un certain temps.

Pour être sûr que vous êtes avec moi, voici une image d’exemple du type de mise en page à laquelle la maçonnerie ressemble (merci à Michael Richins for that):

Une chose que j’aimerais, c’est qu’avant l’annonce du type d’affichage de la maçonnerie, il y a eu des solutions/contrôles discutés, like Andy Barefoot's, mais rien n’a vraiment été décidé comme la principale caractéristique de la maçonnerie CSS. Il y a même eu une bibliothèque super cool Masonry library de David DeSandro, et il a donné useful advice for the W3C et aux vendeurs de navigateurs lors de la rédaction de la spécification et de la mise en Å“uvre de la disposition en maçonnerie, par exemple sur la façon dont le chargement des images fonctionnerait, les éléments enjambant plusieurs colonnes, le remplissage des vides, le maintien de l’ordre horizontal.

Vérifiez le Masonry.js docs pour plus d’informations sur les options d’objet.

Ce fil de discussion a aidé, mais il n’a toujours pas conduit à une déclaration concluante sur ce à quoi la syntaxe de la maçonnerie ressemblera. En fait, nous avions des suggestions de code, comme celles de Dan Tonon:

.flex-container {
display: flex; ;
flex-direction: column; ;
flex-block-count: 2; ;
flex-block-flow: cross; ;
}

Cela introduit deux nouvelles propriétés flexbox appelées flex-block-count et flex-block-flow qui nous permettent de contrôler les éléments de manière similaire (avec column-count) et de contrôler le flux d’éléments, respectivement. Cependant, cela ne fonctionnerait pas comme Michael Richins pointed it out:

Cela ne fonctionnera toujours pas pour des enfants de taille différente…

Les enfants de taille différente ne seront pas pris en compte.

Ce fil de discussion n’allait nulle part, et les discussions se sont donc terminées en avril 2020 avec un utilisateur de GitHub du nom Nic787 faisant référence et approuvant un précédent likely solution pour la maçonnerie en utilisant float au lieu de grid.

Je pense que vous avez raison. Actuellement, float devient vieux et flexbox permet de faire beaucoup de choses, mais cette disposition en maçonnerie manque des deux.

The layout is a bit more complex.

… Parfois, vous pouvez avoir beaucoup de petites images dans une rangée, de sorte que la mise en page de gauche à droite ne peut pas fonctionner tout le temps. La maçonnerie est de gauche à droite comme toujours, mais d’une certaine manière, il est plus facile pour l’utilisateur d’accéder aux informations.

Masonry est de gauche à droite comme d’habitude.

Fortunately, the discussions continued in numerous threads, et les demandes concernant la propriété d’affichage de la maçonnerie ont inondé le W3C. Un autre fil de discussion GitHub notable qui a fait surface sur le débat sur la maçonnerie est, eh bien, le Débat sur la syntaxe de la maçonnerie en novembre 2024, mais il n’a pas non plus abouti à grand-chose à ce moment-là. En fait, Jen Simmons a noté lors de la réunion que:

<Personnellement, je suis déçue que nous ne fassions pas plus de progrès. Cela fait cinq ans que nous avons cette discussion.

Cinq ans d’allers-retours sur la dénomination et la structure à adopter. Utilisons-nous la grille ? Utilisons-nous une toute nouvelle propriété ? Devons-nous créer des propriétés distinctes pour la maçonnerie ? Nous n’avons pas vraiment pu nous décider.

Une chose que j’aime soutenir est un commentaire de notre propre Juan Diego, déclarant comment les solutions ne sont pas « utilisez simplement la grille » ou créez une nouvelle propriété, mais que nous pourrions nous débarrasser du préfixe grid- et nous contenter d’une option qui répond à la fois grid et masonry:

…il devrait être possible d’utiliser une nouvelle propriété sans préfixe template-areas pour la maçonnerie et la grille, quel que soit le contexte de mise en forme…

Fort heureusement, quelque chose de bon est sorti de ce fil de discussion car une autre réunion s’est tenue le 31 janvier 2025, et devinez quoi ? Il a été décidé de réutiliser le modèle de grille et les propriétés de placement pour la disposition en maçonnerie.

Le groupe de travail CSS vient de discuter [css-grid-3][masonry] Masonry Syntax Debate, et s’est mis d’accord sur ce qui suit : RÉSOLU : Réutiliser le modèle de grille et les propriétés de placement pour la mise en page Masonry.

Attendez. Pourquoi est-ce que j’annonce les propriétés de la syntaxe de Masonry ? Qu’en est-il de la syntaxe principale elle-même ? N’est-ce pas la raison pour laquelle nous sommes ici ? Génial, vous êtes toujours avec moi. Alors laissez-moi vous montrer le fil exact où la guerre de la syntaxe Masonry s’est terminée.

Cela nous amène à la dernière annonce que définir grid-lanes sur la propriété display active une mise en page en maçonnerie.

.masonry {
display: grid-lanes; ;
}

Il a été difficile d’en arriver là. Rien que le choix du mot-clé a pris des années. Il suffit de regarder tous les noms qui ont été envisagés pour aboutir à grid-lanes:

• collapsed-grid ou grid collapse
• grid-stack ou stacked-grid
• grid-pack ou packed-grid ou grid pack
• compact grid ou compact grid
• grid-masonry ou grille-maçonnerie
• grid-flex ou grid-flex
• grille à un axe;(Masonry grid) vs. grille à deux axes;(normal grid)
• grid stack;(Masonry grid) vs. grid grid;(normal grid)
• grille décalée ou grille décalée
• grille irrégulière
• semi-grid
• track grid ou track grid
• axial grid

Je n’aurais pas été gêné par staggered-grid puisque c’est ce qu’il est dans React Native. En fait, Kevin Powell agreed. That said, I completely agree with the grid-lanes. Il faudra un certain temps pour que les navigateurs l’implémentent, car les discussions concernant les ajustements de l’abréviation pour la maçonnerie sont toujours en cours, et rien n’a encore été dit à ce sujet.

Oh yes, vous vous souvenez de ça ? It is toujours en cours de réalisation, et je m’attends à ce que nous le voyions après qu’une implémentation correcte des grid-lanes ait commencé à faire le tour du monde. Il y a un bel exemple hypothétique de Fantasai illustrant ce à quoi cela pourrait ressembler si c’était ajouté à la spécification aujourd’hui:

item-flow: ;

/* shortcut for */
item-direction: row | column | row-reverse | column-reverse
item-wrap: wrap | wrap-reverse
item-pack: normal | dense || collapse
item-slack:

A l’usage, cela ressemblerait à quelque chose comme :

.masonry {
display: grid; ;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); ;
item-flow: collapse; /* == item-flow: row collapse 1em; */
gap: 1rem; ;
}

Après de nombreux allers-retours, Masonry grid-lanes est là ! Mais où exactement ?

Et bien, c’est la partie la plus délicate. La vérité est que nous devrons encore attendre que les navigateurs implémentent les grid-lanes. Combien de temps cela prendra-t-il ? Je ne peux pas vraiment le dire, mais prenez en considération que tous les principaux navigateurs ont déjà implémenté un certain type de disposition en maçonnerie derrière des drapeaux ou des aperçus, mais avec des syntaxes différentes :

• Les équipes de Chrome et Edge ont initialement implémenté Masonry in Chromium 140 as display: masonry mais travaillent déjà sur le passage à grid-lanes. Some of leurs démos le reflètent déjà.
• L’équipe WebKit a implémenté Masonry dans Safari 17 en tant que display: grid, but she semble déjà travailler on grid-lanes in the pipelines.
• L’équipe Mozilla a été le premier navigateur à implémenter la disposition en maçonnerie en 2020 – en utilisant display: grid également. Mais comme les autres, ils sont déjà en train de passer à grid-lanes.

De bonnes nouvelles donc ! Il ne reste plus qu’à attendre. Si vous voulez suivre les progrès des grid-lanes, Here's a good one link pool for each browser de Patrick Brosset. Et, si vous ne pouvez pas attendre l’implémentation officielle de la maçonnerie, Zell Liew has an approach to use it today, with a minimum of JavaScript.

Masonry Layout is Now grid-lanes publié à l’origine sur CSS Tricks, which is part of the family DigitalOcean. You should subscribe to the newsletter.