Masonry\u00a0In CSS: Should Grid Evolve Or Stand Aside\u00a0For\u00a0A\u00a0New Module?<\/h1>\nGabriel Shoyombo<\/address>\n 2025-05-06T13:00:00+00:00
\n 2025-09-20T02:02:56+00:00
\n <\/header>\n
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 display: grid<\/code> with 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>\nMaybe there is. The CSS grid layout has an experimental masonry value<\/strong> for 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>\nMaybe there isn\u2019t. CSS lacks native masonry support, forcing developers to use hacks or JavaScript libraries like Masonry.js<\/a>. Developers with a good design background have expressed their criticism about the CSS grid form of masonry, with Rachel<\/a> highlighting that masonry\u2019s organic flow contrasts with Grid\u2019s strict two-dimensional structure<\/strong>, potentially confusing developers expecting Grid-like behaviour or Ahmad Shadeed<\/a> fussing about how it makes the grid layout more complex than it should be, potentially overwhelming developers who value Grid\u2019s clarity for structured layouts. Geoff<\/a> also echoes Rachel Andrew\u2019s concern that \u201cteaching and learning grid to get to understand masonry behaviour unnecessarily lumps two different formatting contexts into one,\u201d<\/em> complicating education for designers and developers who rely on clear mental models.<\/p>\nPerhaps 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
Given these complaints and criticisms \u2014 and a new guy in the game \u2014 the question is:<\/p>\n
Should CSS Grid expand to handle Masonry, or should a new, dedicated module take over, or should item-flow<\/code> just take the reins?<\/p><\/blockquote>\n\n
\n 2025-09-20T02:02:56+00:00
\n <\/header>\n
display: grid<\/code> with 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>\nMaybe there is. The CSS grid layout has an experimental masonry value<\/strong> for 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>\nMaybe there isn\u2019t. CSS lacks native masonry support, forcing developers to use hacks or JavaScript libraries like Masonry.js<\/a>. Developers with a good design background have expressed their criticism about the CSS grid form of masonry, with Rachel<\/a> highlighting that masonry\u2019s organic flow contrasts with Grid\u2019s strict two-dimensional structure<\/strong>, potentially confusing developers expecting Grid-like behaviour or Ahmad Shadeed<\/a> fussing about how it makes the grid layout more complex than it should be, potentially overwhelming developers who value Grid\u2019s clarity for structured layouts. Geoff<\/a> also echoes Rachel Andrew\u2019s concern that \u201cteaching and learning grid to get to understand masonry behaviour unnecessarily lumps two different formatting contexts into one,\u201d<\/em> complicating education for designers and developers who rely on clear mental models.<\/p>\nPerhaps 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
Given these complaints and criticisms \u2014 and a new guy in the game \u2014 the question is:<\/p>\n
Should CSS Grid expand to handle Masonry, or should a new, dedicated module take over, or should item-flow<\/code> just take the reins?<\/p><\/blockquote>\n\n