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 comment l’aborder, l’idée de l’utiliser comme un nouveau concept de mise en page unificateur, ou les approches alternatives pour la faire fonctionner aujourd’hui.

Voici ce que vous devez savoir : ce sera display : grid-lanes.

Les premières discussions concernant la maçonnerie 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 / <column widths here>;, puis vous réglez chaque élément sur grid-row : span <pixel height as integer>;&nbsp ; (par exemple, si l’élément mesure 50px de haut, utilisez grid-row : span 50;).

La grille peut faire de la maçonnerie 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 pour cela ? » Eh bien, Rachel a ajouté cela:

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 pour cela):

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, comme celui d’Andy Barefoot, 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é des conseils utiles au 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 l’a fait remarquer:

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 probable 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.

La mise en page est un peu plus complexe.

… 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.

La maçonnerie est de gauche à droite comme d’habitude.

Fort heureusement, les discussions se sont poursuivies dans de nombreux fils, 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 de maçonnerie.

Attendez. Pourquoi est-ce que j’annonce les propriétés de la syntaxe de la maçonnerie ? 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 de maçonnerie 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
• grille compacte ou grille compacte
• grille-maçonnerie ou grille-maçonnerie
• grille-flex ou grille-flex
• grille à un axe&nbsp ;(grille de maçonnerie) vs. grille à deux axes&nbsp ;(grille normale)
• grid stack&nbsp ;(grille de maçonnerie) vs. grid grid&nbsp ;(grille normale)
• grille décalée ou grille décalée
• grille irrégulière
• semi-grille
• grille de voies ou grille de voies
• grille axiale

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. Cela dit, je suis parfaitement d’accord avec les 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 oui, vous vous souvenez de ça ? C’est 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 : <item-direction&gt ; || <item-wrap&gt ; || <item-pack&gt ; || <item-slack&gt ;

/* raccourci pour */
item-direction : row | column | row-reverse | column-reverse
item-wrap : wrap | wrap-reverse
item-pack : normal | dense || collapse
item-slack : <length-percentage>

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, la maçonnerie 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 dans Chromium 140 en tant que display : masonry mais travaillent déjà sur le passage à grid-lanes. Certaines de leurs démos le reflètent déjà.
• L’équipe WebKit a implémenté la maçonnerie dans Safari 17 en tant que display : grid, mais elle semble déjà travailler sur grid-lanes dans les 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, voici un bon link pool pour chaque navigateur de Patrick Brosset. Et, si vous ne pouvez pas attendre l’implémentation officielle de la maçonnerie, Zell Liew a une approche pour l’utiliser aujourd’hui, avec un minimum de JavaScript.

Masonry Layout is Now grid-lanes publié à l’origine sur CSS-Tricks, qui fait partie de la famille DigitalOcean. Vous devriez obtenir la newsletter.