{"id":26,"date":"2025-06-23T16:50:27","date_gmt":"2025-06-23T11:20:27","guid":{"rendered":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/?p=26"},"modified":"2025-06-23T17:09:32","modified_gmt":"2025-06-23T11:39:32","slug":"masonry-in-css-should-grid-evolve-or-stand-aside-for-a-new-module","status":"publish","type":"post","link":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/learning\/masonry-in-css-should-grid-evolve-or-stand-aside-for-a-new-module.html","title":{"rendered":"Masonry In CSS: Should Grid Evolve Or Stand Aside For A New Module?"},"content":{"rendered":"<p>You\u2019ve got a Pinterest-style layout to build, but you\u2019re tired of JavaScript. Could CSS finally have the answer? Well, for a beginner, taking a look at the pins on your Pinterest page, you might be convinced that the CSS grid layout is enough, but not until you begin to build do you realise\u00a0<code>display: grid<\/code>\u00a0with additional tweaks is less than enough. In fact, Pinterest built its layout with JavaScript, but how cool would it be if it were just CSS? If there were a CSS display property that gave such a layout without any additional JavaScript, how awesome would that be?<\/p>\n<p>Maybe there is. The CSS grid layout has an\u00a0<strong>experimental masonry value<\/strong>\u00a0for\u00a0<code>grid-template-rows<\/code>. The masonry layout is an irregular, flowing grid. Irregular in the sense that, instead of following a rigid grid pattern with spaces left after shorter pieces, the items in the next row of a masonry layout rise to fill the spaces on the masonry axis. It\u2019s the dream for portfolios, image galleries, and social feeds \u2014 designs that thrive on organic flow. But here\u2019s the catch: while this experimental feature exists (think Firefox Nightly with a flag enabled), it\u2019s not the seamless solution you might expect, thanks to limited browser support and some rough edges in its current form.<\/p>\n<p>Maybe there isn\u2019t. CSS lacks native masonry support, forcing developers to use hacks or JavaScript libraries like\u00a0<a href=\"https:\/\/masonry.desandro.com\/\">Masonry.js<\/a>. Developers with a good design background have expressed their criticism about the CSS grid form of masonry, with\u00a0<a href=\"https:\/\/www.smashingmagazine.com\/native-css-masonry-layout-css-grid\/\">Rachel<\/a>\u00a0highlighting that\u00a0<strong>masonry\u2019s organic flow contrasts with Grid\u2019s strict two-dimensional structure<\/strong>, potentially confusing developers expecting Grid-like behaviour or\u00a0<a href=\"https:\/\/ishadeed.com\/article\/should-masonry-be-part-of-css-grid\/\">Ahmad Shadeed<\/a>\u00a0fussing about how it makes the grid layout more complex than it should be, potentially overwhelming developers who value Grid\u2019s clarity for structured layouts.\u00a0<a href=\"https:\/\/css-tricks.com\/css-masonry-css-grid\/\">Geoff<\/a>\u00a0also echoes Rachel Andrew\u2019s concern that\u00a0<em>\u201cteaching and learning grid to get to understand masonry behaviour unnecessarily lumps two different formatting contexts into one,\u201d<\/em>\u00a0complicating education for designers and developers who rely on clear mental models.<\/p>\n<p>Perhaps there might be hope. The Apple WebKit team just sprung up a new contender, which claims not only to merge the pros of grid and masonry into a unified system shorthand but also includes flexbox concepts. Imagine the best of three CSS layout systems in one.<\/p>\n<p>Given these complaints and criticisms \u2014 and a new guy in the game \u2014 the question is:<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You\u2019ve got a Pinterest-style layout to build, but you\u2019re tired of JavaScript. Could CSS [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":27,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[6],"tags":[],"coauthors":[4],"class_list":["post-26","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-learning"],"acf":[],"_links":{"self":[{"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/posts\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":1,"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/posts\/26\/revisions"}],"predecessor-version":[{"id":28,"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/posts\/26\/revisions\/28"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/media\/27"}],"wp:attachment":[{"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/media?parent=26"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/categories?post=26"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/tags?post=26"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/infymyblogstst.infosysapps.com\/nextgen-devops\/wp-json\/wp\/v2\/coauthors?post=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}