{"id":222,"date":"2026-01-06T18:18:23","date_gmt":"2026-01-06T17:18:23","guid":{"rendered":"https:\/\/lmspro.fr\/la-disposition-en-maconnerie-est-maintenant-une-grille\/"},"modified":"2026-02-16T16:27:23","modified_gmt":"2026-02-16T15:27:23","slug":"la-disposition-masonry-est-maintenant-une-grille","status":"publish","type":"post","link":"https:\/\/lmspro.fr\/en\/la-disposition-masonry-est-maintenant-une-grille\/","title":{"rendered":"The Masonry layout is now a grid"},"content":{"rendered":"<h2>La disposition en Masonry est maintenant une grille<\/h2>\n<p>C&rsquo;est fait ! Un nouveau mot-cl\u00c3\u00a9 de propri\u00c3\u00a9t\u00c3\u00a9 d&rsquo;affichage CSS appel\u00c3\u00a9 grid-lanes d\u00c3\u00a9clenchera un mode de disposition en ma\u00c3\u00a7onnerie.<br \/>\nMasonry Layout is Now grid-lanes initialement publi\u00c3\u00a9 sur CSS-Tricks, qui fait partie de la famille DigitalOcean. Vous devriez recevoir la newsletter.<\/p>\n<div class=\"article-meta\">\n<p><strong>Niveau :<\/strong> D\u00c3\u00a9butant<\/p>\n<p><strong>Dur\u00c3\u00a9e :<\/strong> 10 minutes<\/p>\n<p><strong>Public cible :<\/strong> \u00c3\u2030tudiants en design UX\/UI<\/p>\n<\/div>\n<h2>Objectifs p\u00c3\u00a9dagogiques<\/h2>\n<ul>\n<li>Comprendre les concepts cl\u00c3\u00a9s de \u00ab\u00a0La disposition en Masonry est maintenant une grille\u00a0\u00bb<\/li>\n<li>Ma\u00c3\u00aetriser : C&rsquo;est (presque) ici !<\/li>\n<li>Ma\u00c3\u00aetriser : Qu&rsquo;en est-il du flux d&rsquo;articles ?<\/li>\n<li>Appliquer ces connaissances dans vos projets UX\/UI<\/li>\n<\/ul>\n<div id=\"article-sections-695d43dfeb16d\" class=\"wpa-accordion wpa-accordion-flush\">\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d43dfeb16d-item-0\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">1. Introduction<\/span><\/button><\/p>\n<div id=\"article-sections-695d43dfeb16d-item-0\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<p class=\"wpa-text\">Nous avons beaucoup parl\u00c3\u00a9 de la mise en page Masonry ici sur CSS-Tricks, il n&rsquo;est donc pas n\u00c3\u00a9cessaire de vous rappeler les discussions bilat\u00c3\u00a9rales sur <a href=\"https:\/\/css-tricks.com\/csswg-minutes-telecon-2024-12-04-just-use-grid-vs-display-masonry\/\">comment l&rsquo;aborder<\/a>, l&rsquo;id\u00c3\u00a9e de l&rsquo;utiliser <a href=\"https:\/\/css-tricks.com\/masonry-watching-a-css-feature-evolve\/\">comme un nouveau concept de mise en page unificateur<\/a>, ou <a href=\"https:\/\/css-tricks.com\/making-a-masonry-layout-that-works-today\/\">les approches alternatives pour la faire fonctionner aujourd&rsquo;hui<\/a>.<\/p>\n<p class=\"wpa-text\">Voici ce que vous devez savoir : ce sera <strong><code>display : grid-lanes<\/code><\/strong>.<\/p>\n<p>&nbsp;<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/12\/pinterest-layout_y8vjhk.png ?resize=1913{4a00f6d73ff9e2f537053b7c202ea3e7e3a1709f4630047a1912e510d35e71a5}2C1463\" alt=\"Une s\u00c3\u00a9rie d'images hautes dispos\u00c3\u00a9es en cinq colonnes.\" width=\"1913\" height=\"1463\" \/><\/figure>\n<p class=\"wpa-text\">Les premi\u00c3\u00a8res discussions concernant Masonry ont commenc\u00c3\u00a9 en 2017 lorsque <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/945\">Rachel Andrew a exprim\u00c3\u00a9 quelques pr\u00c3\u00a9occupations sur la fa\u00c3\u00a7on de faire une mise en page Pinterest en ma\u00c3\u00a7onnerie<\/a>. Rachel a dit qu&rsquo;il semblait que la bonne approche devrait \u00c3\u00aatre une sorte de flexbox, mais ce n&rsquo;\u00c3\u00a9tait pas enti\u00c3\u00a8rement r\u00c3\u00a9alisable avec flexbox, car les \u00c3\u00a9l\u00c3\u00a9ments s&rsquo;\u00c3\u00a9couleraient plut\u00c3\u00b4t de haut en bas plut\u00c3\u00b4t qu&rsquo;\u00c3\u00a0 travers chaque rang\u00c3\u00a9e:<\/p>\n<blockquote><p>&lt;Actuellement, la m\u00c3\u00a9thode CSS la plus proche de ce type de mise en page consiste \u00c3\u00a0 utiliser <code>multi-col<\/code>, mais les \u00c3\u00a9l\u00c3\u00a9ments s&rsquo;\u00c3\u00a9coulent alors de haut en bas plut\u00c3\u00b4t qu&rsquo;\u00c3\u00a0 travers les lignes.<\/p>\n<p>&lt;Cela ressemble plus \u00c3\u00a0 un comportement de flexbox qu&rsquo;\u00c3\u00a0 une grille, car la solution est largement bas\u00c3\u00a9e sur la taille des \u00c3\u00a9l\u00c3\u00a9ments. J&rsquo;ouvre cette page afin d&rsquo;enregistrer la demande de fonctionnalit\u00c3\u00a9\/le cas d&rsquo;utilisation en vue d&rsquo;une discussion future.<\/p><\/blockquote>\n<p class=\"wpa-text\">C&rsquo;est ainsi que les discussions autour de la disposition en ma\u00c3\u00a7onnerie en CSS ont commenc\u00c3\u00a9 au sein du W3C. Dans ce m\u00c3\u00aame fil de discussion GitHub, vous lirez que\u00c2\u00a0<a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/945#issuecomment-274621588\">Tab Atkins-Bittner<\/a> a partag\u00c3\u00a9 une&amp;nbsp ; \u00ab\u00a0hacky\u00a0\u00bb\u00c2\u00a0fa\u00c3\u00a7on de proc\u00c3\u00a9der avec CSS Grid.<\/p>\n<blockquote>\n<p class=\"wpa-text\">Vous pouvez faire en sorte que la grille fasse de la ma\u00c3\u00a7onnerie si vous connaissez les hauteurs des \u00c3\u00a9l\u00c3\u00a9ments \u00c3\u00a0 l&rsquo;avance. C&rsquo;est un peu compliqu\u00c3\u00a9, mais vous r\u00c3\u00a9glez le conteneur de la grille sur\u00c2\u00a0<code>grid : auto-flow dense 1px \/ &lt;column widths here&gt;;<\/code>, puis vous r\u00c3\u00a9glez chaque \u00c3\u00a9l\u00c3\u00a9ment sur grid-row : span\u00c2\u00a0<code>&lt;pixel height as integer&gt;;<\/code>&amp;nbsp ; (par exemple, si l&rsquo;\u00c3\u00a9l\u00c3\u00a9ment mesure 50px de haut, utilisez\u00c2\u00a0<code>grid-row : span 50;<\/code>).<\/p>\n<p class=\"wpa-text\">La grille peut faire de Masonry si vous connaissez la hauteur des \u00c3\u00a9l\u00c3\u00a9ments \u00c3\u00a0 l&rsquo;avance.<\/p>\n<\/blockquote>\n<p class=\"wpa-text\">J&rsquo;aime bien les astuces CSS astucieuses, mais vous savez ce que j&rsquo;aime aussi ? Une solution CSS fonctionnelle qui facilite son utilisation par les d\u00c3\u00a9butants. Et non, malheureusement, nous ne pouvons pas utiliser\u00c2\u00a0<code>grid-template-rows<\/code>\u00c2\u00a0ou\u00c2\u00a0<code>grid-template-columns<\/code>,\u00c2\u00a0comme\u00c2\u00a0<a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/945#issuecomment-311091451\">Nate Green l&rsquo;a sugg\u00c3\u00a9r\u00c3\u00a9<\/a> dans le m\u00c3\u00aame fil de discussion:<\/p>\n<p><code>.figure-list {<br \/>\ndisplay : grid ;<br \/>\ngrid-template-columns : 1fr 1fr 1fr ;<br \/>\ngrid-template-rows : flow ;<br \/>\n}<\/code><\/p>\n<p class=\"wpa-text\"><a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/945#issuecomment-319921105\">Atkins-Bittner a r\u00c3\u00a9pondu<\/a>:<\/p>\n<blockquote>\n<p class=\"wpa-text\">Il n&rsquo;y a pas de moyen \u00ab\u00a0simple\u00a0\u00bb d&rsquo;adapter Grid \u00c3\u00a0 Masonry &#8211; tout cela impliquerait des modifications non triviales de l&rsquo;algorithme de mise en page. Packery, en particulier, a vraiment besoin que les choses aient une largeur d\u00c3\u00a9finie.<\/p>\n<\/blockquote>\n<p class=\"wpa-text\">Ok, c&rsquo;est tr\u00c3\u00a8s bien. Je suis s\u00c3\u00bbr que vous vous dites aussi, \u00ab\u00a0pourquoi ne pas cr\u00c3\u00a9er une nouvelle propri\u00c3\u00a9t\u00c3\u00a9 <code>display<\/code> pour cela ?\u00a0\u00bb Eh bien, <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/945#issuecomment-319994626\">Rachel a ajout\u00c3\u00a9<\/a> cela:<\/p>\n<blockquote>\n<p class=\"wpa-text\">Le fait est que nous ne pouvons pas cr\u00c3\u00a9er une toute nouvelle valeur d&rsquo;affichage pour chaque mod\u00c3\u00a8le de conception distinct.<\/p>\n<\/blockquote>\n<p class=\"wpa-text\">Notez que toutes ces discussions ont eu lieu d\u00c3\u00a8s 2017, ce qui signifie que la ma\u00c3\u00a7onnerie est un objectif insaisissable depuis un certain temps.<\/p>\n<p class=\"wpa-text\">Pour \u00c3\u00aatre s\u00c3\u00bbr que vous \u00c3\u00aates avec moi, voici une image d&rsquo;exemple du type de mise en page \u00c3\u00a0 laquelle la ma\u00c3\u00a7onnerie ressemble (merci \u00c3\u00a0\u00c2\u00a0<a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/945#issuecomment-321411718\">Michael Richins pour cela<\/a>):<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/12\/s_784A261A980C64638433C95E78563C3270A2142F061161C1BD041DE68CD7E0D4_1763637710599_29148470-cf9b8db2-7d2a-11e7-81f7-3a146d594b8f.png?resize=800{4a00f6d73ff9e2f537053b7c202ea3e7e3a1709f4630047a1912e510d35e71a5}2C800\" alt=\"Une s\u00c3\u00a9rie de neuf bo\u00c3\u00aetes vertes dispos\u00c3\u00a9es en trois colonnes, chaque bo\u00c3\u00aete avec un grand num\u00c3\u00a9ro noir indiquant leur ordre dans la disposition.\" width=\"800\" height=\"800\" \/><\/figure>\n<p class=\"wpa-text\">Une chose que j&rsquo;aimerais, c&rsquo;est qu&rsquo;avant l&rsquo;annonce du type d&rsquo;affichage de la ma\u00c3\u00a7onnerie, il y a eu des solutions\/contr\u00c3\u00b4les discut\u00c3\u00a9s,\u00c2\u00a0<a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/945#issuecomment-334962477\">comme celui d&rsquo;Andy Barefoot<\/a>, mais rien n&rsquo;a vraiment \u00c3\u00a9t\u00c3\u00a9 d\u00c3\u00a9cid\u00c3\u00a9 comme la principale caract\u00c3\u00a9ristique de la ma\u00c3\u00a7onnerie CSS. Il y a m\u00c3\u00aame eu une biblioth\u00c3\u00a8que super cool\u00c2\u00a0<a href=\"https:\/\/masonry.desandro.com\/\">Masonry library<\/a>\u00c2\u00a0de\u00c2\u00a0<a href=\"https:\/\/github.com\/desandro\">David DeSandro<\/a>, et il a donn\u00c3\u00a9\u00c2\u00a0<a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/945#issuecomment-432658269\">des conseils utiles au W3C<\/a>\u00c2\u00a0et aux vendeurs de navigateurs lors de la r\u00c3\u00a9daction de la sp\u00c3\u00a9cification et de la mise en \u00c5\u201cuvre de la disposition en ma\u00c3\u00a7onnerie, par exemple sur la fa\u00c3\u00a7on dont le chargement des images fonctionnerait, les \u00c3\u00a9l\u00c3\u00a9ments enjambant plusieurs colonnes, le remplissage des vides, le maintien de l&rsquo;ordre horizontal.<\/p>\n<div>CodePen Embed Fallback<\/div>\n<p class=\"wpa-text\">V\u00c3\u00a9rifiez le\u00c2\u00a0<a href=\"https:\/\/masonry.desandro.com\/\">Masonry.js docs<\/a>\u00c2\u00a0pour plus d&rsquo;informations sur les options d&rsquo;objet.<\/p>\n<p class=\"wpa-text\">Ce fil de discussion a aid\u00c3\u00a9,\u00c2\u00a0<strong>mais il n&rsquo;a toujours pas conduit \u00c3\u00a0 une d\u00c3\u00a9claration concluante<\/strong>\u00c2\u00a0sur ce \u00c3\u00a0 quoi la syntaxe de la ma\u00c3\u00a7onnerie ressemblera. En fait, nous avions des suggestions de code, comme celles de\u00c2\u00a0<a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/945#issuecomment-334448407\">Dan Tonon<\/a>:<\/p>\n<p><code>.flex-container {<br \/>\ndisplay : flex ;<br \/>\nflex-direction : column ;<br \/>\nflex-block-count : 2 ;<br \/>\nflex-block-flow : cross ;<br \/>\n}<\/code><\/p>\n<p class=\"wpa-text\">Cela introduit deux nouvelles propri\u00c3\u00a9t\u00c3\u00a9s flexbox appel\u00c3\u00a9es\u00c2\u00a0<code>flex-block-count<\/code>\u00c2\u00a0et\u00c2\u00a0<code>flex-block-flow<\/code>\u00c2\u00a0qui nous permettent de contr\u00c3\u00b4ler les \u00c3\u00a9l\u00c3\u00a9ments de mani\u00c3\u00a8re similaire (avec <code>column-count<\/code>) et de contr\u00c3\u00b4ler le flux d&rsquo;\u00c3\u00a9l\u00c3\u00a9ments, respectivement. Cependant, cela ne fonctionnerait pas comme\u00c2\u00a0<a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/945#issuecomment-334483625\">Michael Richins l&rsquo;a fait remarquer<\/a>:<\/p>\n<blockquote>\n<p class=\"wpa-text\">Cela ne fonctionnera toujours pas pour des enfants de taille diff\u00c3\u00a9rente&#8230;<\/p>\n<p class=\"wpa-text\">Les enfants de taille diff\u00c3\u00a9rente ne seront pas pris en compte.<\/p>\n<\/blockquote>\n<p class=\"wpa-text\">Ce fil de discussion n&rsquo;allait nulle part, et les discussions se sont donc termin\u00c3\u00a9es en avril 2020 avec un utilisateur de GitHub du nom\u00c2\u00a0<a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/945#issuecomment-611247371\">Nic787 faisant r\u00c3\u00a9f\u00c3\u00a9rence et approuvant un pr\u00c3\u00a9c\u00c3\u00a9dent<\/a>\u00c2\u00a0<a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/945#issuecomment-611247371\"><em>probable<\/em><\/a>\u00c2\u00a0<a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/945#issuecomment-611247371\">solution<\/a>\u00c2\u00a0pour la ma\u00c3\u00a7onnerie en utilisant\u00c2\u00a0<code>float<\/code>\u00c2\u00a0au lieu de grid.<\/p>\n<blockquote>\n<p class=\"wpa-text\">Je pense que vous avez raison. Actuellement, float devient vieux et flexbox permet de faire beaucoup de choses, mais cette disposition en ma\u00c3\u00a7onnerie manque des deux.<\/p>\n<p class=\"wpa-text\">La mise en page est un peu plus complexe.<\/p>\n<p class=\"wpa-text\">&#8230; Parfois, vous pouvez avoir beaucoup de petites images dans une rang\u00c3\u00a9e, de sorte que la mise en page de gauche \u00c3\u00a0 droite ne peut pas fonctionner tout le temps. La ma\u00c3\u00a7onnerie est de gauche \u00c3\u00a0 droite comme toujours, mais d&rsquo;une certaine mani\u00c3\u00a8re, il est plus facile pour l&rsquo;utilisateur d&rsquo;acc\u00c3\u00a9der aux informations.<\/p>\n<p class=\"spip wpa-text\">Masonry est de gauche \u00c3\u00a0 droite comme d&rsquo;habitude.<\/p>\n<\/blockquote>\n<p class=\"wpa-text\"><a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues?q=is{4a00f6d73ff9e2f537053b7c202ea3e7e3a1709f4630047a1912e510d35e71a5}3Aissue{4a00f6d73ff9e2f537053b7c202ea3e7e3a1709f4630047a1912e510d35e71a5}20state{4a00f6d73ff9e2f537053b7c202ea3e7e3a1709f4630047a1912e510d35e71a5}3Aopen{4a00f6d73ff9e2f537053b7c202ea3e7e3a1709f4630047a1912e510d35e71a5}20sort{4a00f6d73ff9e2f537053b7c202ea3e7e3a1709f4630047a1912e510d35e71a5}3Acreated-asc{4a00f6d73ff9e2f537053b7c202ea3e7e3a1709f4630047a1912e510d35e71a5}20masonry\">Fort heureusement, les discussions se sont poursuivies dans de nombreux fils,<\/a>\u00c2\u00a0et les demandes concernant la propri\u00c3\u00a9t\u00c3\u00a9 d&rsquo;affichage de la ma\u00c3\u00a7onnerie ont inond\u00c3\u00a9 le W3C. Un autre fil de discussion GitHub notable qui a fait surface sur le d\u00c3\u00a9bat sur la ma\u00c3\u00a7onnerie est, eh bien, le\u00c2\u00a0<a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/11243\">D\u00c3\u00a9bat sur la syntaxe de la ma\u00c3\u00a7onnerie<\/a>\u00c2\u00a0en novembre 2024, mais il n&rsquo;a pas non plus abouti \u00c3\u00a0 grand-chose\u00c2\u00a0<em><a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/11243#issuecomment-2518124401\">\u00c3\u00a0 ce moment-l\u00c3\u00a0<\/a><\/em>. En fait,\u00c2\u00a0<a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/11243#issuecomment-2518124401\">Jen Simmons a not\u00c3\u00a9 lors de la r\u00c3\u00a9union<\/a>\u00c2\u00a0que:<\/p>\n<blockquote><p>&lt;Personnellement, je suis d\u00c3\u00a9\u00c3\u00a7ue que nous ne fassions pas plus de progr\u00c3\u00a8s. Cela fait cinq ans que nous avons cette discussion.<\/p><\/blockquote>\n<p class=\"wpa-text\">Cinq ans d&rsquo;allers-retours sur la d\u00c3\u00a9nomination et la structure \u00c3\u00a0 adopter. Utilisons-nous la grille ? Utilisons-nous une toute nouvelle propri\u00c3\u00a9t\u00c3\u00a9 ? Devons-nous cr\u00c3\u00a9er des propri\u00c3\u00a9t\u00c3\u00a9s distinctes pour la ma\u00c3\u00a7onnerie ? Nous n&rsquo;avons pas vraiment pu nous d\u00c3\u00a9cider.<\/p>\n<p class=\"wpa-text\">Une chose que j&rsquo;aime soutenir est un commentaire de notre propre\u00c2\u00a0<a href=\"https:\/\/css-tricks.com\/author\/monknow\/\">Juan Diego<\/a>, d\u00c3\u00a9clarant comment\u00c2\u00a0<a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/11243#issuecomment-2524100674\">les solutions ne sont pas \u00ab\u00a0utilisez simplement la grille\u00a0\u00bb ou cr\u00c3\u00a9ez une nouvelle propri\u00c3\u00a9t\u00c3\u00a9<\/a>, mais que nous pourrions nous d\u00c3\u00a9barrasser du pr\u00c3\u00a9fixe\u00c2\u00a0<code>grid-<\/code>\u00c2\u00a0et nous contenter d&rsquo;une option qui r\u00c3\u00a9pond \u00c3\u00a0 la fois\u00c2\u00a0<code>grid<\/code>\u00c2\u00a0et\u00c2\u00a0<code>masonry<\/code>:<\/p>\n<blockquote>\n<p class=\"wpa-text\">&#8230;il devrait \u00c3\u00aatre possible d&rsquo;utiliser une nouvelle propri\u00c3\u00a9t\u00c3\u00a9 sans pr\u00c3\u00a9fixe\u00c2\u00a0<code>template-areas<\/code>\u00c2\u00a0pour la ma\u00c3\u00a7onnerie et la grille, quel que soit le contexte de mise en forme&#8230;<\/p>\n<\/blockquote>\n<p class=\"wpa-text\">Fort heureusement, quelque chose de bon est sorti de ce fil de discussion car\u00c2\u00a0<a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/11243#issuecomment-2627998471\">une autre r\u00c3\u00a9union<\/a>\u00c2\u00a0s&rsquo;est tenue le 31 janvier 2025, et devinez quoi ? Il a \u00c3\u00a9t\u00c3\u00a9 d\u00c3\u00a9cid\u00c3\u00a9 de r\u00c3\u00a9utiliser le mod\u00c3\u00a8le de grille et les propri\u00c3\u00a9t\u00c3\u00a9s de placement pour la disposition en ma\u00c3\u00a7onnerie.<\/p>\n<blockquote>\n<p class=\"wpa-text\">Le groupe de travail CSS vient de discuter\u00c2\u00a0<code>[css-grid-3][masonry] Masonry Syntax Debate<\/code>, et s&rsquo;est mis d&rsquo;accord sur ce qui suit : R\u00c3\u2030SOLU : R\u00c3\u00a9utiliser le mod\u00c3\u00a8le de grille et les propri\u00c3\u00a9t\u00c3\u00a9s de placement pour la mise en page Masonry.<\/p>\n<\/blockquote>\n<p class=\"wpa-text\">Attendez. Pourquoi est-ce que j&rsquo;annonce les propri\u00c3\u00a9t\u00c3\u00a9s de la syntaxe de Masonry ? Qu&rsquo;en est-il de la syntaxe principale elle-m\u00c3\u00aame ? N&rsquo;est-ce pas la raison pour laquelle nous sommes ici ? G\u00c3\u00a9nial, vous \u00c3\u00aates toujours avec moi. Alors laissez-moi vous montrer le fil exact o\u00c3\u00b9 la guerre de la syntaxe Masonry s&rsquo;est termin\u00c3\u00a9e.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d43dfeb16d-item-1\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">2. C&rsquo;est (presque) ici !<\/span><\/button><\/p>\n<div id=\"article-sections-695d43dfeb16d-item-1\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<p class=\"wpa-text\">Cela nous am\u00c3\u00a8ne \u00c3\u00a0 la <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/12022#issuecomment-3525043825\">derni\u00c3\u00a8re annonce<\/a> que\u00c2\u00a0d\u00c3\u00a9finir\u00c2\u00a0<code>grid-lanes<\/code>\u00c2\u00a0sur la propri\u00c3\u00a9t\u00c3\u00a9 <code>display<\/code> active une mise en page en ma\u00c3\u00a7onnerie.<\/p>\n<p><code>.masonry {<br \/>\ndisplay : grid-lanes ;<br \/>\n}<\/code><\/p>\n<p class=\"wpa-text\">Il a \u00c3\u00a9t\u00c3\u00a9 difficile d&rsquo;en arriver l\u00c3\u00a0. Rien que le choix du mot-cl\u00c3\u00a9 a pris <em>des ann\u00c3\u00a9es<\/em>. Il suffit de regarder tous les noms qui ont \u00c3\u00a9t\u00c3\u00a9 envisag\u00c3\u00a9s pour aboutir \u00c3\u00a0 <code>grid-lanes<\/code>:<\/p>\n<ul>\n<li><code>collapsed-grid<\/code>\u00c2\u00a0ou\u00c2\u00a0<code>grid collapse<\/code><\/li>\n<li><code>grid-stack<\/code>\u00c2\u00a0ou\u00c2\u00a0<code>stacked-grid<\/code><\/li>\n<li><code>grid-pack<\/code>\u00c2\u00a0ou\u00c2\u00a0<code>packed-grid<\/code>\u00c2\u00a0ou\u00c2\u00a0<code>grid pack<\/code><\/li>\n<li><code>grille compacte<\/code>\u00c2\u00a0ou\u00c2\u00a0<code>grille compacte<\/code><\/li>\n<li><code>grille-masonry<\/code>\u00c2\u00a0ou\u00c2\u00a0<code>grille-ma\u00c3\u00a7onnerie<\/code><\/li>\n<li><code>grille-flex<\/code>\u00c2\u00a0ou\u00c2\u00a0<code>grille-flex<\/code><\/li>\n<li><code>grille \u00c3\u00a0 un axe<\/code>&amp;nbsp ;(grille Masonry) vs. <code>grille \u00c3\u00a0 deux axes<\/code>&amp;nbsp ;(grille normale)<\/li>\n<li><code>grid stack<\/code>&amp;nbsp ;(grille Masonry) vs. <code>grid grid<\/code>&amp;nbsp ;(grille normale)<\/li>\n<li><code>grille d\u00c3\u00a9cal\u00c3\u00a9e<\/code>\u00c2\u00a0ou\u00c2\u00a0<code>grille d\u00c3\u00a9cal\u00c3\u00a9e<\/code><\/li>\n<li><code>grille irr\u00c3\u00a9guli\u00c3\u00a8re<\/code><\/li>\n<li><code>semi-grille<\/code><\/li>\n<li><code>grille de voies<\/code>\u00c2\u00a0ou\u00c2\u00a0<code>grille de voies<\/code><\/li>\n<li><code>grille axiale<\/code><\/li>\n<\/ul>\n<p class=\"wpa-text\">Je n&rsquo;aurais pas \u00c3\u00a9t\u00c3\u00a9 g\u00c3\u00aan\u00c3\u00a9 par\u00c2\u00a0<code>staggered-grid<\/code>\u00c2\u00a0puisque c&rsquo;est ce qu&rsquo;il est dans React Native. En fait,\u00c2\u00a0<a href=\"https:\/\/css-tricks.com\/author\/kevinpowell\/\">Kevin Powell<\/a>\u00c2\u00a0<a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/12022#issuecomment-3334326242\">agreed<\/a>. Cela dit, je suis parfaitement d&rsquo;accord avec les <code>grid-lanes<\/code>. Il faudra un certain temps pour que les navigateurs l&rsquo;impl\u00c3\u00a9mentent, car les discussions concernant les ajustements de l&rsquo;abr\u00c3\u00a9viation pour la ma\u00c3\u00a7onnerie sont toujours en cours, et rien n&rsquo;a encore \u00c3\u00a9t\u00c3\u00a9 dit \u00c3\u00a0 ce sujet.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d43dfeb16d-item-2\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">3. Qu&rsquo;en est-il du flux d&rsquo;articles ?<\/span><\/button><\/p>\n<div id=\"article-sections-695d43dfeb16d-item-2\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<p class=\"wpa-text\">Oh oui, <a href=\"https:\/\/css-tricks.com\/quick-hit-42\/\">vous vous souvenez de \u00c3\u00a7a<\/a> ? C&rsquo;est <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/11243#issuecomment-2584991716\">toujours en cours de r\u00c3\u00a9alisation<\/a>, et je m&rsquo;attends \u00c3\u00a0 ce que nous le voyions apr\u00c3\u00a8s qu&rsquo;une impl\u00c3\u00a9mentation correcte des <code>grid-lanes<\/code> ait commenc\u00c3\u00a9 \u00c3\u00a0 faire le tour du monde. <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/11243#issuecomment-2584991716\">Il y a un bel exemple hypoth\u00c3\u00a9tique de Fantasai<\/a> illustrant ce \u00c3\u00a0 quoi cela pourrait ressembler si c&rsquo;\u00c3\u00a9tait ajout\u00c3\u00a9 \u00c3\u00a0 la sp\u00c3\u00a9cification aujourd&rsquo;hui:<\/p>\n<p><code>item-flow : &lt;item-direction&amp;gt ; || &lt;item-wrap&amp;gt ; || &lt;item-pack&amp;gt ; || &lt;item-slack&amp;gt ;<\/code><\/p>\n<p>\/* raccourci pour *\/<br \/>\nitem-direction : row | column | row-reverse | column-reverse<br \/>\nitem-wrap : wrap | wrap-reverse<br \/>\nitem-pack : normal | dense || collapse<br \/>\nitem-slack : &lt;length-percentage&gt;<\/p>\n<p class=\"wpa-text\">A l&rsquo;usage, cela ressemblerait \u00c3\u00a0 quelque chose comme :<\/p>\n<p><code>.masonry {<br \/>\ndisplay : grid ;<br \/>\ngrid-template-columns : repeat(auto-fill, minmax(14rem, 1fr)) ;<br \/>\nitem-flow : collapse ; \/* == item-flow : row collapse 1em ; *\/<br \/>\ngap : 1rem ;<br \/>\n}<\/code><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d43dfeb16d-item-3\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">4. Quelle est la prochaine \u00c3\u00a9tape ?<\/span><\/button><\/p>\n<div id=\"article-sections-695d43dfeb16d-item-3\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<p class=\"wpa-text\">Apr\u00c3\u00a8s de nombreux allers-retours, Masonry\u00c2\u00a0<code>grid-lanes<\/code> est l\u00c3\u00a0 ! Mais o\u00c3\u00b9 exactement ?<\/p>\n<p class=\"wpa-text\">Et bien, c&rsquo;est la partie la plus d\u00c3\u00a9licate. La v\u00c3\u00a9rit\u00c3\u00a9 est que nous devrons encore attendre que les navigateurs impl\u00c3\u00a9mentent les <code>grid-lanes<\/code>. Combien de temps cela prendra-t-il ? Je ne peux pas vraiment le dire, mais prenez en consid\u00c3\u00a9ration que tous les principaux navigateurs ont d\u00c3\u00a9j\u00c3\u00a0 impl\u00c3\u00a9ment\u00c3\u00a9 un certain type de disposition en ma\u00c3\u00a7onnerie derri\u00c3\u00a8re des drapeaux ou des aper\u00c3\u00a7us, mais avec des syntaxes diff\u00c3\u00a9rentes :<\/p>\n<ul>\n<li>Les \u00c3\u00a9quipes de Chrome et Edge ont initialement <a href=\"https:\/\/developer.chrome.com\/blog\/masonry-update#test-css-masonry\">impl\u00c3\u00a9ment\u00c3\u00a9 Masonry<\/a> dans Chromium 140 en tant que <code>display : masonry<\/code> mais travaillent d\u00c3\u00a9j\u00c3\u00a0 sur le passage \u00c3\u00a0 <code>grid-lanes<\/code>. Certaines de <a href=\"https:\/\/github.com\/MicrosoftEdge\/Demos\/tree\/main\/css-masonry\">leurs d\u00c3\u00a9mos<\/a> le refl\u00c3\u00a8tent d\u00c3\u00a9j\u00c3\u00a0.<\/li>\n<li>L&rsquo;\u00c3\u00a9quipe WebKit <a href=\"https:\/\/webkit.org\/blog\/16026\/css-masonry-syntax\/#the-remaining-debate-over-syntax\">a impl\u00c3\u00a9ment\u00c3\u00a9 Masonry<\/a>\u00c2\u00a0dans Safari 17 en tant que <code>display : grid<\/code>, mais elle <a href=\"https:\/\/bugs.webkit.org\/show_bug.cgi?id=302618\">semble d\u00c3\u00a9j\u00c3\u00a0 travailler<\/a> sur <code>grid-lanes<\/code> dans les pipelines.<\/li>\n<li>L&rsquo;\u00c3\u00a9quipe Mozilla a \u00c3\u00a9t\u00c3\u00a9 le premier navigateur \u00c3\u00a0 impl\u00c3\u00a9menter la disposition en ma\u00c3\u00a7onnerie en 2020 &#8211; en utilisant <code>display : grid<\/code> \u00c3\u00a9galement. Mais comme les autres, <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=2002087\">ils sont d\u00c3\u00a9j\u00c3\u00a0 en train<\/a> de passer \u00c3\u00a0 <code>grid-lanes<\/code>.<\/li>\n<\/ul>\n<p class=\"wpa-text\">De bonnes nouvelles donc ! Il ne reste plus qu&rsquo;\u00c3\u00a0 attendre. Si vous voulez suivre les progr\u00c3\u00a8s des <code>grid-lanes<\/code>, voici un bon <a href=\"https:\/\/patrickbrosset.com\/lab\/css-masonry-resources\/\">link pool pour chaque navigateur<\/a> de Patrick Brosset. Et, si vous ne pouvez pas attendre l&rsquo;impl\u00c3\u00a9mentation officielle de la ma\u00c3\u00a7onnerie, <a href=\"https:\/\/css-tricks.com\/making-a-masonry-layout-that-works-today\/\">Zell Liew a une approche<\/a> pour l&rsquo;utiliser aujourd&rsquo;hui, avec un minimum de JavaScript.<\/p>\n<hr \/>\n<p class=\"wpa-text\"><small><a href=\"https:\/\/css-tricks.com\/masonry-layout-is-now-grid-lanes\/\">Masonry Layout is Now grid-lanes<\/a> publi\u00c3\u00a9 \u00c3\u00a0 l&rsquo;origine sur <a href=\"https:\/\/css-tricks.com\">CSS-Tricks<\/a>, qui fait partie de la famille <a href=\"https:\/\/try.digitalocean.com\/css-tricks\/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=\">DigitalOcean<\/a>. Vous devriez <a href=\"https:\/\/css-tricks.com\/newsletters\/\">obtenir la newsletter<\/a>.<\/small><\/p>\n<p><small>\u00c2\u00a0<\/small><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"quiz-block-1\" class=\"quiz-container\" data-quiz-json=\"https:\/\/lmspro.fr\/wp-content\/plugins\/generate-article-endpoint\/quiz-data\/en\/quiz-disposition-masonry-grille-css.json\" aria-label=\"Interactive Quiz\"><div class=\"quiz-loading\" role=\"status\" aria-live=\"polite\"><span class=\"quiz-sr-only\">Loading quiz...<\/span><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>La disposition en Masonry est maintenant une grille C&rsquo;est fait ! Un nouveau mot-cl\u00c3\u00a9 de propri\u00c3\u00a9t\u00c3\u00a9 d&rsquo;affichage CSS appel\u00c3\u00a9 grid-lanes d\u00c3\u00a9clenchera un mode de disposition en ma\u00c3\u00a7onnerie. Masonry Layout is Now grid-lanes initialement publi\u00c3\u00a9 sur CSS-Tricks, qui fait partie de la famille DigitalOcean. Vous devriez recevoir la newsletter. Niveau : D\u00c3\u00a9butant Dur\u00c3\u00a9e : 10 minutes &#8230; <a href=\"https:\/\/lmspro.fr\/en\/la-disposition-masonry-est-maintenant-une-grille\/\" class=\"more-link\">Read More<span class=\"screen-reader-text\"> \u00ab\u00a0La disposition Masonry est maintenant une grille\u00a0\u00bb<\/span> &raquo;<\/a><\/p>","protected":false},"author":1,"featured_media":233,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[91,30],"tags":[26,5,29,27,28,24,3],"class_list":["post-222","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flexbox-grid","category-module-1-fondamentaux-techniques-du-web","tag-css","tag-design","tag-frontend","tag-html","tag-javascript","tag-layout","tag-ui"],"_links":{"self":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/222","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/comments?post=222"}],"version-history":[{"count":4,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/222\/revisions"}],"predecessor-version":[{"id":618,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/222\/revisions\/618"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/media\/233"}],"wp:attachment":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/media?parent=222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/categories?post=222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/tags?post=222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}