[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Fblog\u002Fcss-masonry-syntax-wars":3,"$f65hr2742SYOQefskpESxXMiI5-HlqmG4N3hnGRc6fZ8":979,"i-local-icon:calendar-days":983,"i-local-icon:tag":988,"i-local-icon:eye":990},{"id":4,"title":5,"body":6,"categories_slug":969,"comment_count":970,"date_published":971,"description":972,"extension":973,"meta":974,"navigation":137,"path":975,"seo":976,"stem":977,"__hash__":978},"content\u002Fblog\u002F23.css-masonry-syntax-wars.md","The CSS masonry syntax wars",{"type":7,"value":8,"toc":953},"minimark",[9,13,18,31,40,68,72,88,97,102,382,386,655,659,666,670,685,692,696,699,704,819,826,829,836,848,857,936,940,949],[10,11,5],"h1",{"id":12},"the-css-masonry-syntax-wars",[14,15],"meta-card",{":categories":16,":date":17},"categories_slug","date_published",[19,20,22,23,27,28],"h2",{"id":21},"overview-display-masonry-vs-grid-template-rows-masonry","Overview: ",[24,25,26],"code",{},"display: masonry"," vs ",[24,29,30],{},"grid-template-rows: masonry",[32,33,34,35,39],"p",{},"There ",[36,37,38],"del",{},"are"," were two competing philosophies for how to bring masonry to the browser:",[41,42,43,59],"ul",{},[44,45,46,50,51,54,55,58],"li",{},[47,48,49],"strong",{},"The Firefox (Mozilla) approach:"," They believe masonry is just a specific type of Grid. You would use ",[24,52,53],{},"display: grid"," and simply set the rows to ",[24,56,57],{},"masonry",".",[44,60,61,64,65,67],{},[47,62,63],{},"The Chromium (Google) \u002F WebKit (Apple) approach:"," They were proposing a brand new ",[24,66,26],{}," property. They argue that masonry layout logic is different enough from Grid (which relies on a strict X\u002FY coordinate system) that it deserves its own layout module, similar to how flex is separate from grid.",[19,69,71],{"id":70},"_1-the-firefox-approach","1. The Firefox approach",[32,73,74,75,79,80,83,84,87],{},"You will need to enable the ",[76,77,78],"em",{},"layout.css.grid-template-masonry-value"," flag in your Firefox browser. You can go to ",[24,81,82],{},"about:config"," and search for ",[76,85,86],{},"'masonry'"," as shown below:",[32,89,90],{},[91,92],"img",{"alt":93,"className":94,"src":96},"Firefox masonry flag config switch",[95],"blog-image","\u002Fimages\u002Fblog\u002Fmasonry-syntax\u002Fmasonry-syntax-2.webp",[98,99,101],"h3",{"id":100},"the-html-structure","The HTML structure",[103,104,109],"pre",{"className":105,"code":106,"language":107,"meta":108,"style":108},"language-html shiki shiki-themes github-dark","\u002F\u002F Notes:\n\u002F\u002F - Some of the images have been removed from the html code just for the sake of brevity. \n\u002F\u002F - The html structure is exactly the same for both the Firefox approach and the Chromium approach.\n\n\u003Cdiv class=\"grid-masonry\">\n  \u003Cdiv class=\"masonry-container\">\n    \u003Ch2 class=\"label\">Image 1\u003C\u002Fh2>\n    \u003Cimg\n      src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&q=80&w=800&h=600\" \u002F>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"masonry-container\">\n    \u003Ch2 class=\"label\">Image 2\u003C\u002Fh2>\n    \u003Cimg\n      src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1487958449943-2429e8be8625?auto=format&fit=crop&q=80&w=400&h=400\" \u002F>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"masonry-container\">\n    \u003Ch2 class=\"label\">Image 3\u003C\u002Fh2>\n    \u003Cimg\n      src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1494438639946-1ebd1d20bf85?auto=format&fit=crop&q=80&w=600&h=800\" \u002F>\n  \u003C\u002Fdiv>\n\n  \u003C!-- More images repeated here... -->\n\u003C\u002Fdiv>\n","html","",[24,110,111,120,126,132,139,163,180,202,210,224,234,249,269,276,288,297,312,332,339,351,360,365,372],{"__ignoreMap":108},[112,113,116],"span",{"class":114,"line":115},"line",1,[112,117,119],{"class":118},"s95oV","\u002F\u002F Notes:\n",[112,121,123],{"class":114,"line":122},2,[112,124,125],{"class":118},"\u002F\u002F - Some of the images have been removed from the html code just for the sake of brevity. \n",[112,127,129],{"class":114,"line":128},3,[112,130,131],{"class":118},"\u002F\u002F - The html structure is exactly the same for both the Firefox approach and the Chromium approach.\n",[112,133,135],{"class":114,"line":134},4,[112,136,138],{"emptyLinePlaceholder":137},true,"\n",[112,140,142,145,149,153,156,160],{"class":114,"line":141},5,[112,143,144],{"class":118},"\u003C",[112,146,148],{"class":147},"s4JwU","div",[112,150,152],{"class":151},"svObZ"," class",[112,154,155],{"class":118},"=",[112,157,159],{"class":158},"sU2Wk","\"grid-masonry\"",[112,161,162],{"class":118},">\n",[112,164,166,169,171,173,175,178],{"class":114,"line":165},6,[112,167,168],{"class":118},"  \u003C",[112,170,148],{"class":147},[112,172,152],{"class":151},[112,174,155],{"class":118},[112,176,177],{"class":158},"\"masonry-container\"",[112,179,162],{"class":118},[112,181,183,186,188,190,192,195,198,200],{"class":114,"line":182},7,[112,184,185],{"class":118},"    \u003C",[112,187,19],{"class":147},[112,189,152],{"class":151},[112,191,155],{"class":118},[112,193,194],{"class":158},"\"label\"",[112,196,197],{"class":118},">Image 1\u003C\u002F",[112,199,19],{"class":147},[112,201,162],{"class":118},[112,203,205,207],{"class":114,"line":204},8,[112,206,185],{"class":118},[112,208,209],{"class":147},"img\n",[112,211,213,216,218,221],{"class":114,"line":212},9,[112,214,215],{"class":151},"      src",[112,217,155],{"class":118},[112,219,220],{"class":158},"\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&q=80&w=800&h=600\"",[112,222,223],{"class":118}," \u002F>\n",[112,225,227,230,232],{"class":114,"line":226},10,[112,228,229],{"class":118},"  \u003C\u002F",[112,231,148],{"class":147},[112,233,162],{"class":118},[112,235,237,239,241,243,245,247],{"class":114,"line":236},11,[112,238,168],{"class":118},[112,240,148],{"class":147},[112,242,152],{"class":151},[112,244,155],{"class":118},[112,246,177],{"class":158},[112,248,162],{"class":118},[112,250,252,254,256,258,260,262,265,267],{"class":114,"line":251},12,[112,253,185],{"class":118},[112,255,19],{"class":147},[112,257,152],{"class":151},[112,259,155],{"class":118},[112,261,194],{"class":158},[112,263,264],{"class":118},">Image 2\u003C\u002F",[112,266,19],{"class":147},[112,268,162],{"class":118},[112,270,272,274],{"class":114,"line":271},13,[112,273,185],{"class":118},[112,275,209],{"class":147},[112,277,279,281,283,286],{"class":114,"line":278},14,[112,280,215],{"class":151},[112,282,155],{"class":118},[112,284,285],{"class":158},"\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1487958449943-2429e8be8625?auto=format&fit=crop&q=80&w=400&h=400\"",[112,287,223],{"class":118},[112,289,291,293,295],{"class":114,"line":290},15,[112,292,229],{"class":118},[112,294,148],{"class":147},[112,296,162],{"class":118},[112,298,300,302,304,306,308,310],{"class":114,"line":299},16,[112,301,168],{"class":118},[112,303,148],{"class":147},[112,305,152],{"class":151},[112,307,155],{"class":118},[112,309,177],{"class":158},[112,311,162],{"class":118},[112,313,315,317,319,321,323,325,328,330],{"class":114,"line":314},17,[112,316,185],{"class":118},[112,318,19],{"class":147},[112,320,152],{"class":151},[112,322,155],{"class":118},[112,324,194],{"class":158},[112,326,327],{"class":118},">Image 3\u003C\u002F",[112,329,19],{"class":147},[112,331,162],{"class":118},[112,333,335,337],{"class":114,"line":334},18,[112,336,185],{"class":118},[112,338,209],{"class":147},[112,340,342,344,346,349],{"class":114,"line":341},19,[112,343,215],{"class":151},[112,345,155],{"class":118},[112,347,348],{"class":158},"\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1494438639946-1ebd1d20bf85?auto=format&fit=crop&q=80&w=600&h=800\"",[112,350,223],{"class":118},[112,352,354,356,358],{"class":114,"line":353},20,[112,355,229],{"class":118},[112,357,148],{"class":147},[112,359,162],{"class":118},[112,361,363],{"class":114,"line":362},21,[112,364,138],{"emptyLinePlaceholder":137},[112,366,368],{"class":114,"line":367},22,[112,369,371],{"class":370},"sAwPA","  \u003C!-- More images repeated here... -->\n",[112,373,375,378,380],{"class":114,"line":374},23,[112,376,377],{"class":118},"\u003C\u002F",[112,379,148],{"class":147},[112,381,162],{"class":118},[98,383,385],{"id":384},"the-css-for-firefox","The CSS for Firefox",[103,387,391],{"className":388,"code":389,"language":390,"meta":108,"style":108},"language-css shiki shiki-themes github-dark",".grid-masonry {\n  display: grid; \u002F* This part is unique to Firefox masonry layout *\u002F\n  gap: 14px;\n  margin: 60px;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  grid-template-rows: masonry; \u002F* This part is unique to Firefox masonry layout *\u002F\n}\n\n.masonry-container {\n  position: relative;\n}\n\n.label {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: rgba(0, 0, 0, 0.6);\n  color: white;\n  padding: 0.5rem 1.5rem;\n  z-index: 10;\n}\n","css",[24,392,393,401,419,436,450,490,500,505,509,516,528,532,536,543,554,566,577,607,619,639,651],{"__ignoreMap":108},[112,394,395,398],{"class":114,"line":115},[112,396,397],{"class":151},".grid-masonry",[112,399,400],{"class":118}," {\n",[112,402,403,407,410,413,416],{"class":114,"line":122},[112,404,406],{"class":405},"sDLfK","  display",[112,408,409],{"class":118},": ",[112,411,412],{"class":405},"grid",[112,414,415],{"class":118},"; ",[112,417,418],{"class":370},"\u002F* This part is unique to Firefox masonry layout *\u002F\n",[112,420,421,424,426,429,433],{"class":114,"line":128},[112,422,423],{"class":405},"  gap",[112,425,409],{"class":118},[112,427,428],{"class":405},"14",[112,430,432],{"class":431},"snl16","px",[112,434,435],{"class":118},";\n",[112,437,438,441,443,446,448],{"class":114,"line":134},[112,439,440],{"class":405},"  margin",[112,442,409],{"class":118},[112,444,445],{"class":405},"60",[112,447,432],{"class":431},[112,449,435],{"class":118},[112,451,452,455,457,460,463,466,469,472,474,477,479,481,484,487],{"class":114,"line":141},[112,453,454],{"class":405},"  grid-template-columns",[112,456,409],{"class":118},[112,458,459],{"class":405},"repeat",[112,461,462],{"class":118},"(",[112,464,465],{"class":405},"auto-fill",[112,467,468],{"class":118},", ",[112,470,471],{"class":405},"minmax",[112,473,462],{"class":118},[112,475,476],{"class":405},"250",[112,478,432],{"class":431},[112,480,468],{"class":118},[112,482,483],{"class":405},"1",[112,485,486],{"class":431},"fr",[112,488,489],{"class":118},"));\n",[112,491,492,495,498],{"class":114,"line":165},[112,493,494],{"class":405},"  grid-template-rows",[112,496,497],{"class":118},": masonry; ",[112,499,418],{"class":370},[112,501,502],{"class":114,"line":182},[112,503,504],{"class":118},"}\n",[112,506,507],{"class":114,"line":204},[112,508,138],{"emptyLinePlaceholder":137},[112,510,511,514],{"class":114,"line":212},[112,512,513],{"class":151},".masonry-container",[112,515,400],{"class":118},[112,517,518,521,523,526],{"class":114,"line":226},[112,519,520],{"class":405},"  position",[112,522,409],{"class":118},[112,524,525],{"class":405},"relative",[112,527,435],{"class":118},[112,529,530],{"class":114,"line":236},[112,531,504],{"class":118},[112,533,534],{"class":114,"line":251},[112,535,138],{"emptyLinePlaceholder":137},[112,537,538,541],{"class":114,"line":271},[112,539,540],{"class":151},".label",[112,542,400],{"class":118},[112,544,545,547,549,552],{"class":114,"line":278},[112,546,520],{"class":405},[112,548,409],{"class":118},[112,550,551],{"class":405},"absolute",[112,553,435],{"class":118},[112,555,556,559,561,564],{"class":114,"line":290},[112,557,558],{"class":405},"  top",[112,560,409],{"class":118},[112,562,563],{"class":405},"0",[112,565,435],{"class":118},[112,567,568,571,573,575],{"class":114,"line":299},[112,569,570],{"class":405},"  left",[112,572,409],{"class":118},[112,574,563],{"class":405},[112,576,435],{"class":118},[112,578,579,582,584,587,589,591,593,595,597,599,601,604],{"class":114,"line":314},[112,580,581],{"class":405},"  background-color",[112,583,409],{"class":118},[112,585,586],{"class":405},"rgba",[112,588,462],{"class":118},[112,590,563],{"class":405},[112,592,468],{"class":118},[112,594,563],{"class":405},[112,596,468],{"class":118},[112,598,563],{"class":405},[112,600,468],{"class":118},[112,602,603],{"class":405},"0.6",[112,605,606],{"class":118},");\n",[112,608,609,612,614,617],{"class":114,"line":334},[112,610,611],{"class":405},"  color",[112,613,409],{"class":118},[112,615,616],{"class":405},"white",[112,618,435],{"class":118},[112,620,621,624,626,629,632,635,637],{"class":114,"line":341},[112,622,623],{"class":405},"  padding",[112,625,409],{"class":118},[112,627,628],{"class":405},"0.5",[112,630,631],{"class":431},"rem",[112,633,634],{"class":405}," 1.5",[112,636,631],{"class":431},[112,638,435],{"class":118},[112,640,641,644,646,649],{"class":114,"line":353},[112,642,643],{"class":405},"  z-index",[112,645,409],{"class":118},[112,647,648],{"class":405},"10",[112,650,435],{"class":118},[112,652,653],{"class":114,"line":362},[112,654,504],{"class":118},[98,656,658],{"id":657},"example-masonry-layout-result","Example masonry layout result",[32,660,661],{},[91,662],{"alt":663,"className":664,"src":665},"Firefox masonry layout example",[95],"\u002Fimages\u002Fblog\u002Fmasonry-syntax\u002Fmasonry-syntax-firefox.webp",[19,667,669],{"id":668},"_2-the-chromiumwebkit-approach","2. The Chromium\u002FWebKit approach",[32,671,74,672,675,676,679,680,83,683,87],{},[76,673,674],{},"CSS Masonry Layout experimental"," flag in your Chromium\u002FWebkit browser. For example, in Chrome you can go to ",[24,677,678],{},"chrome:\u002F\u002Fflags"," or in Brave browser go to ",[24,681,682],{},"brave:\u002F\u002Fflags",[76,684,86],{},[32,686,687],{},[91,688],{"alt":689,"className":690,"src":691},"Chromium browser masonry flag switch",[95],"\u002Fimages\u002Fblog\u002Fmasonry-syntax\u002Fmasonry-syntax-3.webp",[98,693,695],{"id":694},"the-css-for-chromium-google-webkit-apple","The CSS for Chromium (Google) \u002F WebKit (Apple)",[32,697,698],{},"The html structure remains exactly the same as for Firefox. The only difference is in the CSS.",[32,700,701,702,87],{},"As mentioned in the overview section, Chromium\u002FWebKit based browsers take a different approach. They use a completely new display property called ",[24,703,57],{},[103,705,707],{"className":388,"code":706,"language":390,"meta":108,"style":108},".grid-masonry {\n  display: masonry; \u002F* This part is unique to Chromium\u002FWebkit masonry layout *\u002F\n  gap: 14px;\n  margin: 60px;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n}\n\n.masonry-container {\n  \u002F* As above *\u002F\n}\n\n.label {\n  \u002F* As above *\u002F\n}\n",[24,708,709,715,724,736,748,778,782,786,792,797,801,805,811,815],{"__ignoreMap":108},[112,710,711,713],{"class":114,"line":115},[112,712,397],{"class":151},[112,714,400],{"class":118},[112,716,717,719,721],{"class":114,"line":122},[112,718,406],{"class":405},[112,720,497],{"class":118},[112,722,723],{"class":370},"\u002F* This part is unique to Chromium\u002FWebkit masonry layout *\u002F\n",[112,725,726,728,730,732,734],{"class":114,"line":128},[112,727,423],{"class":405},[112,729,409],{"class":118},[112,731,428],{"class":405},[112,733,432],{"class":431},[112,735,435],{"class":118},[112,737,738,740,742,744,746],{"class":114,"line":134},[112,739,440],{"class":405},[112,741,409],{"class":118},[112,743,445],{"class":405},[112,745,432],{"class":431},[112,747,435],{"class":118},[112,749,750,752,754,756,758,760,762,764,766,768,770,772,774,776],{"class":114,"line":141},[112,751,454],{"class":405},[112,753,409],{"class":118},[112,755,459],{"class":405},[112,757,462],{"class":118},[112,759,465],{"class":405},[112,761,468],{"class":118},[112,763,471],{"class":405},[112,765,462],{"class":118},[112,767,476],{"class":405},[112,769,432],{"class":431},[112,771,468],{"class":118},[112,773,483],{"class":405},[112,775,486],{"class":431},[112,777,489],{"class":118},[112,779,780],{"class":114,"line":165},[112,781,504],{"class":118},[112,783,784],{"class":114,"line":182},[112,785,138],{"emptyLinePlaceholder":137},[112,787,788,790],{"class":114,"line":204},[112,789,513],{"class":151},[112,791,400],{"class":118},[112,793,794],{"class":114,"line":212},[112,795,796],{"class":370},"  \u002F* As above *\u002F\n",[112,798,799],{"class":114,"line":226},[112,800,504],{"class":118},[112,802,803],{"class":114,"line":236},[112,804,138],{"emptyLinePlaceholder":137},[112,806,807,809],{"class":114,"line":251},[112,808,540],{"class":151},[112,810,400],{"class":118},[112,812,813],{"class":114,"line":271},[112,814,796],{"class":370},[112,816,817],{"class":114,"line":278},[112,818,504],{"class":118},[19,820,822,823],{"id":821},"_3-and-the-winner-display-grid-lanes","3. And the winner? ",[24,824,825],{},"display: grid-lanes",[32,827,828],{},"Neither of the above 2 options! As of November, 2025, the CSS Working Group announced the following:",[32,830,831],{},[91,832],{"alt":833,"className":834,"src":835},"CSS Working Group masonry decision",[95],"\u002Fimages\u002Fblog\u002Fmasonry-syntax\u002Fmasonry-syntax-1.webp",[32,837,838,839,847],{},"From the ",[840,841,846],"a",{":target":842,"href":843,"rel":844},"\\_blank","https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-grid-3\u002F#grid-lanes-model",[845],"nofollow","W3C Working Draft",":",[849,850,851],"blockquote",{},[32,852,853,856],{},[47,854,855],{},"Grid lanes layout"," lays out items into pre-defined tracks similar to grid layout in one axis (called the grid axis), but flows them freely similar to flex layout in the other (called the stacking axis). Similar to grid layout and unlike flex layout, grid lanes layout’s auto-placement distributes items across the tracks to keep the lengths of those tracks as similar as possible.",[103,858,860],{"className":388,"code":859,"language":390,"meta":108,"style":108},".grid-masonry {\n  display: grid-lanes; \u002F* The new masonry layout option (when fully supported) *\u002F\n  gap: 14px;\n  margin: 60px;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n}\n",[24,861,862,868,878,890,902,932],{"__ignoreMap":108},[112,863,864,866],{"class":114,"line":115},[112,865,397],{"class":151},[112,867,400],{"class":118},[112,869,870,872,875],{"class":114,"line":122},[112,871,406],{"class":405},[112,873,874],{"class":118},": grid-lanes; ",[112,876,877],{"class":370},"\u002F* The new masonry layout option (when fully supported) *\u002F\n",[112,879,880,882,884,886,888],{"class":114,"line":128},[112,881,423],{"class":405},[112,883,409],{"class":118},[112,885,428],{"class":405},[112,887,432],{"class":431},[112,889,435],{"class":118},[112,891,892,894,896,898,900],{"class":114,"line":134},[112,893,440],{"class":405},[112,895,409],{"class":118},[112,897,445],{"class":405},[112,899,432],{"class":431},[112,901,435],{"class":118},[112,903,904,906,908,910,912,914,916,918,920,922,924,926,928,930],{"class":114,"line":141},[112,905,454],{"class":405},[112,907,409],{"class":118},[112,909,459],{"class":405},[112,911,462],{"class":118},[112,913,465],{"class":405},[112,915,468],{"class":118},[112,917,471],{"class":405},[112,919,462],{"class":118},[112,921,476],{"class":405},[112,923,432],{"class":431},[112,925,468],{"class":118},[112,927,483],{"class":405},[112,929,486],{"class":431},[112,931,489],{"class":118},[112,933,934],{"class":114,"line":165},[112,935,504],{"class":118},[98,937,939],{"id":938},"and-when-will-it-be-supported","And when will it be supported?",[32,941,942,943,948],{},"Short answer, don't know. It can currently be tested in browsers such as ",[840,944,947],{":target":842,"href":945,"rel":946},"https:\u002F\u002Fdeveloper.apple.com\u002Fsafari\u002Fresources\u002F",[845],"Safari Technology Preview",". Hopefully, the other major browsers implement support for the new display property quickly now that it has finally been announced by the CSS working group.",[950,951,952],"style",{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}",{"title":108,"searchDepth":122,"depth":122,"links":954},[955,957,962,965],{"id":21,"depth":122,"text":956},"Overview: display: masonry vs grid-template-rows: masonry",{"id":70,"depth":122,"text":71,"children":958},[959,960,961],{"id":100,"depth":128,"text":101},{"id":384,"depth":128,"text":385},{"id":657,"depth":128,"text":658},{"id":668,"depth":122,"text":669,"children":963},[964],{"id":694,"depth":128,"text":695},{"id":821,"depth":122,"text":966,"children":967},"3. And the winner? display: grid-lanes",[968],{"id":938,"depth":128,"text":939},[390],null,"2026-01-04","As of November, 2025, the CSS Working Group announced a new CSS display property keyword called grid-lanes, which replaces the Firefox and Chromium\u002FWebkit approach to masonry layouts.","md",{},"\u002Fblog\u002Fcss-masonry-syntax-wars",{"title":5,"description":972},"blog\u002F23.css-masonry-syntax-wars","E1Z1-LYYb7jF7LpssJLAOXUuPg2goRj40MDJpHS72Fs",[980],{"id":981,"name":975,"count":982},40,890,{"left":984,"top":984,"width":985,"height":985,"rotate":984,"vFlip":986,"hFlip":986,"body":987},0,24,false,"\u003Cpath\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\"\n    d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12zM12 15h.008v.008H12zm0 2.25h.008v.008H12zM9.75 15h.008v.008H9.75zm0 2.25h.008v.008H9.75zM7.5 15h.008v.008H7.5zm0 2.25h.008v.008H7.5zm6.75-4.5h.008v.008h-.008zm0 2.25h.008v.008h-.008zm0 2.25h.008v.008h-.008zm2.25-4.5h.008v.008H16.5zm0 2.25h.008v.008H16.5z\" \u002F>",{"left":984,"top":984,"width":985,"height":985,"rotate":984,"vFlip":986,"hFlip":986,"body":989},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.1 18.1 0 0 0 5.224-5.223c.54-.827.368-1.908-.33-2.607l-9.583-9.58A2.25 2.25 0 0 0 9.568 3\" \u002F>\n    \u003Cpath d=\"M6 6h.008v.008H6z\" \u002F>\n  \u003C\u002Fg>",{"left":984,"top":984,"width":985,"height":985,"rotate":984,"vFlip":986,"hFlip":986,"body":991},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M2.036 12.322a1 1 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178c.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178\" \u002F>\n    \u003Cpath d=\"M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0\" \u002F>\n  \u003C\u002Fg>"]