{"id":1120,"date":"2025-12-02T09:00:00","date_gmt":"2025-12-02T10:00:00","guid":{"rendered":"https:\/\/computercoursesonline.com\/?p=1120"},"modified":"2025-12-04T20:59:15","modified_gmt":"2025-12-04T20:59:15","slug":"masonry-things-you-wont-need-a-library-for-anymore","status":"publish","type":"post","link":"https:\/\/computercoursesonline.com\/index.php\/2025\/12\/02\/masonry-things-you-wont-need-a-library-for-anymore\/","title":{"rendered":"Masonry: Things You Won\u2019t Need A Library For Anymore"},"content":{"rendered":"<p>              <title>Masonry: Things You Won\u2019t Need A Library For Anymore<\/title><\/p>\n<article>\n<header>\n<h1>Masonry: Things You Won\u2019t Need A Library For Anymore<\/h1>\n<address>Patrick Brosset<\/address>\n<p>                  2025-12-02T10:00:00+00:00<br \/>\n                  2025-12-04T20:33:04+00:00<br \/>\n                <\/header>\n<p>About 15 years ago, I was working at a company where we built apps for travel agents, airport workers, and airline companies. We also built our own in-house framework for UI components and single-page app capabilities.<\/p>\n<p>We had components for everything: fields, buttons, tabs, ranges, datatables, menus, datepickers, selects, and multiselects. We even had a div component. Our div component was great by the way, it allowed us to do rounded corners on all browsers, which, believe it or not, wasn&rsquo;t an easy thing to do at the time.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/1-div-component-example.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"407\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Div component, which allows to do rounded corners\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/1-div-component-example.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/1-div-component-example.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Our work took place at a point in our history when JS, Ajax, and dynamic HTML were seen as a revolution that brought us into the future. Suddenly, we could update a page dynamically, get data from a server, and avoid having to navigate to other pages, which was seen as slow and flashed a big white rectangle on the screen between the two pages.<\/p>\n<p>There was a phrase, made popular by Jeff Atwood (the founder of StackOverflow), which read:<\/p>\n<blockquote><p>\u201cAny application that can be written in JavaScript will eventually be written in JavaScript.\u201d<\/p>\n<p>&mdash; <a href=\"https:\/\/blog.codinghorror.com\/all-programming-is-web-programming\/#:~:text=any%20application%20that%C2%A0can%C2%A0be%20written%20in%20JavaScript%2C%C2%A0will%C2%A0eventually%20be%20written%20in%20JavaScript\">Jeff Atwood<\/a><\/p><\/blockquote>\n<p>To us at the time, this felt like a dare to actually go and create those apps. It felt like a blanket approval to do everything with JS.<\/p>\n<p>So we did everything with JS, and we didn\u2019t really take the time to research other ways of doing things. We didn\u2019t really feel the incentive to properly learn what HTML and CSS could do. We didn\u2019t really perceive the web as an evolving app platform in its entirety. We mostly saw it as something we needed to work around, especially when it came to browser support. We could just throw more JS at it to get things done.<\/p>\n<p>Would taking the time to learn more about how the web worked and what was available on the platform have helped me? Sure, I could probably have shaved a bunch of code that wasn\u2019t truly needed. But, at the time, maybe not that much.<\/p>\n<p>You see, browser differences were pretty significant back then. This was a time when Internet Explorer was still the dominant browser, with Firefox being the close second, but starting to lose market share due to Chrome rapidly gaining popularity. Although Chrome and Firefox were quite good at agreeing on web standards, the environments in which our apps were running meant that we had to support IE6 for a long time. Even when we were allowed to support IE8, we still had to deal with a lot of differences between browsers. Not only that, but the web of the time just didn&rsquo;t have that many capabilities built right into the platform.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/gs.statcounter.com\/browser-market-share\/all\/worldwide\/2010\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"492\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/2-browser-market-share.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Image source: <a href=\"https:\/\/gs.statcounter.com\/browser-market-share\/all\/worldwide\/2010\">statcounter<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/2-browser-market-share.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Fast forward to today. Things have changed tremendously. Not only do we have more of these capabilities than ever before, but the rate at which they become available has increased as well.<\/p>\n<p>Let me ask the question again, then: Would taking the time to learn more about how the web works and what is available on the platform help you today? Absolutely yes. Learning to understand and use the web platform today puts you at a huge advantage over other developers.<\/p>\n<p>Whether you work on performance, accessibility, responsiveness, all of them together, or just shipping UI features, if you want to do it as a responsible engineer, knowing the tools that are available to you helps you reach your goals faster and better.<\/p>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"https:\/\/www.smashingconf.com\/online-workshops\/\">Smashing Workshops<\/a><\/strong> on <strong>front-end, design &amp; UX<\/strong>, with practical takeaways, live sessions, <strong>video recordings<\/strong> and a friendly Q&amp;A. With Brad Frost, St\u00e9ph Walter and <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\">so many others<\/a>.<\/p>\n<p><a data-instant href=\"smashing-workshops\" class=\"btn btn--green btn--large\">Jump to the workshops&nbsp;\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"smashing-workshops\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img loading=\"lazy\" class=\"feature-panel-image-img lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Feature Panel\" width=\"257\" height=\"355\" data-src=\"\/images\/smashing-cat\/cat-scubadiving-panel.svg\"><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"some-things-you-might-not-need-a-library-for-anymore\">Some Things You Might Not Need A Library For Anymore<\/h2>\n<p>Knowing what browsers support today, the question, then, is: What can we ditch? Do we need a div component to do rounded corners in 2025? Of course, we don\u2019t. The <code>border-radius<\/code> property has been supported by all currently used browsers for more than 15 years at this point. And <code>corner-shape<\/code> is also coming soon, for even fancier corners.<\/p>\n<p>Let\u2019s take a look at relatively recent features that are now available in all major browsers, and which you can use to replace existing dependencies in your codebase.<\/p>\n<p>The point isn&rsquo;t to immediately ditch all your beloved libraries and rewrite your codebase. As for everything else, you\u2019ll need to take browser support into account first and decide based on other factors specific to your project. The following features are implemented in the three main browser engines (Chromium, WebKit, and Gecko), but you might have different browser support requirements that prevent you from using them right away. Now is still a good time to learn about these features, though, and perhaps plan to use them at some point.<\/p>\n<h3 id=\"popovers-and-dialogs\">Popovers And Dialogs<\/h3>\n<p>The <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Popover_API\">Popover API<\/a>, the <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/HTML\/Reference\/Elements\/dialog\"><code>&lt;dialog&gt;<\/code> HTML element<\/a>, and the <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/Reference\/Selectors\/::backdrop\"><code>::backdrop<\/code> pseudo-element<\/a> can help you get rid of dependencies on popup, tooltip, and dialog libraries, such as <a href=\"https:\/\/floating-ui.com\/\">Floating UI<\/a>, <a href=\"https:\/\/atomiks.github.io\/tippyjs\/\">Tippy.js<\/a>, <a href=\"https:\/\/tetherjs.dev\/docs\/welcome\/\">Tether<\/a>, or <a href=\"https:\/\/react-tooltip.com\/\">React Tooltip<\/a>.<\/p>\n<p>They handle accessibility and focus management for you, out of the box, are highly customizable by using CSS, and can easily be animated.<\/p>\n<h3 id=\"accordions\">Accordions<\/h3>\n<p>The <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/HTML\/Reference\/Elements\/details\"><code>&lt;details&gt;<\/code> element<\/a>, its <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/HTML\/Reference\/Elements\/details#name\"><code>name<\/code> attribute<\/a> for mutually exclusive elements, and the <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/Reference\/Selectors\/::details-content\"><code>::details-content<\/code><\/a> pseudo-element remove the need for accordion components like the <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/accordion\/\">Bootstrap Accordion<\/a> or the <a href=\"https:\/\/mui.com\/material-ui\/react-accordion\/\">React Accordion component<\/a>.<\/p>\n<p>Just using the platform here means it\u2019s easier for folks who know HTML\/CSS to understand your code without having to first learn to use a specific library. It also means you\u2019re immune to breaking changes in the library or the discontinuation of that library. And, of course, it means less code to download and run. Mutually exclusive details elements don\u2019t need JS to open, close, or animate.<\/p>\n<h3 id=\"css-syntax\">CSS Syntax<\/h3>\n<p><a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/@layer\">Cascade layers<\/a>, for a more organized CSS codebase, <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/Reference\/Selectors\/Nesting_selector\">CSS nesting<\/a>, for more compact CSS, new color functions, <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/CSS_colors\/Relative_colors\">relative colors<\/a>, and <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/color_value\/color-mix\"><code>color-mix<\/code><\/a>, new Maths functions like <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/abs\"><code>abs()<\/code><\/a>, <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/sign\"><code>sign()<\/code><\/a>, <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/pow\"><code>pow()<\/code><\/a> and others help reduce dependencies on <a href=\"https:\/\/css-tricks.com\/is-it-time-to-un-sass\/\">CSS pre-processors<\/a>, utility libraries like Bootstrap and Tailwind, or even runtime CSS-in-JS libraries.<\/p>\n<p>The game changer <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/Reference\/Selectors\/:has\"><code>:has()<\/code><\/a>, one of the most requested features for a long time, removes the need for more complicated JS-based solutions.<\/p>\n<h3 id=\"js-utilities\">JS Utilities<\/h3>\n<p>Modern Array methods like <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/findLast\"><code>findLast()<\/code><\/a>, or <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/at\"><code>at()<\/code><\/a>, as well as Set methods like <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Set\/difference\"><code>difference()<\/code><\/a>, <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Set\/intersection\"><code>intersection()<\/code><\/a>, <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Set\/union\"><code>union()<\/code><\/a> and others can reduce dependencies on libraries like <a href=\"https:\/\/lodash.com\/\">Lodash<\/a>.<\/p>\n<h3 id=\"container-queries\">Container Queries<\/h3>\n<p><a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/CSS_containment\/Container_queries\">Container queries<\/a> make UI components respond to things other than the viewport size, and therefore make them more reusable across different contexts.<\/p>\n<p>No need to use a JS-heavy UI library for this anymore, and no need to use a <a href=\"https:\/\/github.com\/GoogleChromeLabs\/container-query-polyfill\">polyfill<\/a> either.<\/p>\n<h3 id=\"layout\">Layout<\/h3>\n<p><a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/CSS_grid_layout\">Grid<\/a>, <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/CSS_grid_layout\/Subgrid\">subgrid<\/a>, <a href=\"https:\/\/developer.mozilla.org\/docs\/Learn_web_development\/Core\/CSS_layout\/Flexbox\">flexbox<\/a>, or <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/Reference\/Properties\/columns\">multi-column<\/a> have been around for a long time now, but looking at the <a href=\"https:\/\/2025.stateofcss.com\/en-US\">results of the State of CSS surveys<\/a>, it\u2019s clear that developers tend to be very cautious with adopting new things, and wait for a very long time before they do.<\/p>\n<p>These features have been <a href=\"https:\/\/web-platform-dx.github.io\/web-features\/\">Baseline<\/a> for a long time and you could use them to get rid of dependencies on things like the <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/layout\/grid\/\">Bootstrap\u2019s grid system<\/a>, <a href=\"https:\/\/get.foundation\/sites\/docs\/flexbox-utilities.html\">Foundation Framework\u2019s flexbox utilities<\/a>, <a href=\"https:\/\/bulma.io\/documentation\/grid\/fixed-grid\/\">Bulma fixed grid<\/a>, <a href=\"https:\/\/materializecss.com\/grid.html\">Materialize grid<\/a>, or <a href=\"https:\/\/tailwindcss.com\/docs\/columns\">Tailwind columns<\/a>.<\/p>\n<p>I\u2019m not saying you should drop your framework. Your team adopted it for a reason, and removing it might be a big project. But looking at what the web platform can offer without a third-party wrapper on top comes with a lot of benefits.<\/p>\n<h2 id=\"things-you-might-not-need-anymore-in-the-near-future\">Things You Might Not Need Anymore In The Near Future<\/h2>\n<p>Now, let\u2019s take a quick look at some of the things you will not need a library for in the near future. That is to say, the things below are not quite ready for mass adoption, but being aware of them and planning for potential later use can be helpful.<\/p>\n<h3 id=\"anchor-positioning\">Anchor Positioning<\/h3>\n<p><a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/CSS_anchor_positioning\">CSS anchor positioning<\/a> handles the positioning of popovers and tooltips relative to other elements, and takes care of keeping them in view, even when moving, scrolling, or resizing the page.<\/p>\n<p>This is a great complement to the Popover API mentioned before, which will make it even easier to migrate away from more performance-intensive JS solutions.<\/p>\n<h3 id=\"navigation-api\">Navigation API<\/h3>\n<p>The <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Navigation_API\">Navigation API<\/a> can be used to handle navigation in single-page apps and might be a great complement, or even a replacement, to <a href=\"https:\/\/reactrouter.com\/\">React Router<\/a>, <a href=\"https:\/\/nextjs.org\/docs\/routing\/introduction\">Next.js routing<\/a>, or <a href=\"https:\/\/angular.io\/guide\/router\">Angular routing tasks<\/a>.<\/p>\n<h3 id=\"view-transitions-api\">View Transitions API<\/h3>\n<p>The <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/View_Transition_API\">View Transitions API<\/a> can animate between the different states of a page. On a single-page application, this makes smooth transitions between states very easy, and can help you get rid of animation libraries such as <a href=\"https:\/\/animejs.com\/\">Anime.js<\/a>, <a href=\"https:\/\/greensock.com\/gsap\/\">GSAP<\/a>, or <a href=\"https:\/\/motion.dev\/\">Motion.dev<\/a>.<\/p>\n<p>Even better, the API can also be used with multiple-page applications.<\/p>\n<p>Remember earlier, when I said that the reason we built single-page apps at the company where I worked 15 years ago was to avoid the white flash of page reloads when navigating? Had that API been available at the time, we would have been able to achieve beautiful page transition effects without a single-page framework and without a huge initial download of the entire app.<\/p>\n<h3 id=\"scroll-driven-animations\">Scroll-driven Animations<\/h3>\n<p><a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/CSS_scroll-driven_animations\">Scroll-driven animations<\/a> run on the user\u2019s scroll position, rather than over time, making them a great solution for storytelling and product tours.<\/p>\n<p>Some people <a href=\"https:\/\/gt-era.com\/\">have gone a bit over the top<\/a> with it, but when used well, this can be a very effective design tool, and can help get rid of libraries like: <a href=\"https:\/\/scrollrevealjs.org\/\">ScrollReveal<\/a>, <a href=\"https:\/\/gsap.com\/scroll\/\">GSAP Scroll<\/a>, or <a href=\"https:\/\/wowjs.uk\/\">WOW.js<\/a>.<\/p>\n<h3 id=\"customizable-selects\">Customizable Selects<\/h3>\n<p>A <a href=\"https:\/\/developer.mozilla.org\/docs\/Learn_web_development\/Extensions\/Forms\/Customizable_select\">customizable select<\/a> is a normal <code>&lt;select&gt;<\/code> element that lets you fully customize its appearance and content, while ensuring accessibility and performance benefits.<\/p>\n<p>This has been a long time coming, and a highly requested feature, and it\u2019s amazing to see it come to the web platform soon. With a built-in customizable select, you can finally ditch all this hard-to-maintain JS code for your custom select components.<\/p>\n<h3 id=\"css-masonry\">CSS Masonry<\/h3>\n<p><a href=\"https:\/\/developer.chrome.com\/blog\/masonry-update\">CSS Masonry<\/a> is another upcoming web platform feature that I want to spend more time on.<\/p>\n<p>With CSS Masonry, you can achieve layouts that are very hard, or even impossible, with flex, grid, or other built-in CSS layout primitives. Developers often resort to using third-party libraries to achieve Masonry layouts, such as the <a href=\"https:\/\/masonry.desandro.com\/\">Masonry JS library<\/a>.<\/p>\n<p>But, more on that later. Let\u2019s wrap this point up before moving on to Masonry.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"why-you-should-care\">Why You Should Care<\/h2>\n<p>The job market is full of web developers with experience in JavaScript and the latest frameworks of the day. So, really, what\u2019s the point in learning to use the web platform primitives more, if you can do the same things with the libraries, utilities, and frameworks you already know today?<\/p>\n<p>When an entire industry relies on these frameworks, and you can just pull in the right library, shouldn\u2019t browser vendors just work with these libraries to make them load and run faster, rather than trying to convince developers to use the platform instead?<\/p>\n<p>First of all, we do work with library authors, and we do make frameworks better by learning about what they use and improving those areas.<\/p>\n<p>But secondly, \u201cjust using the platform\u201d can bring pretty significant benefits.<\/p>\n<h3 id=\"sending-less-code-to-devices\">Sending Less Code To Devices<\/h3>\n<p>The main benefit is that you end up sending far less code to your clients\u2019 devices.<\/p>\n<p>According to the <a href=\"https:\/\/almanac.httparchive.org\/en\/2024\/\">2024 Web Almanac<\/a>, the average number of HTTP requests is around 70 per site, <a href=\"https:\/\/almanac.httparchive.org\/en\/2024\/javascript#how-many-javascript-requests-per-page\">most of which is due to JavaScript with 23 requests<\/a>. In 2024, JS overtook images as the dominant file type too. The median number of page requests for JS files is 23, up 8% since 2022.<\/p>\n<p>And page size continues to grow year over year. The median page weight is around 2MB now, which is 1.8MB more than it was 10 years ago.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/almanac.httparchive.org\/en\/2024\/page-weight\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"462\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Median page weight\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/3-median-page-weight.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Image source: <a href=\"https:\/\/almanac.httparchive.org\/en\/2024\/page-weight\">Web Almanac<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/3-median-page-weight.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Sure, your internet connection speed has probably increased, too, but that\u2019s not the case for everyone. And not everyone has the same device capabilities either.<\/p>\n<p>Pulling in third-party code for things you can do with the platform, instead, most probably means you ship more code, and therefore reach fewer customers than you normally would. On the web, bad loading performance leads to large abandonment rates and hurts brand reputation.<\/p>\n<h3 id=\"running-less-code-on-devices\">Running Less Code On Devices<\/h3>\n<p>Furthermore, the code you do ship on your customers\u2019 devices likely runs faster if it uses fewer JavaScript abstractions on top of the platform. It\u2019s also probably more responsive and more accessible by default. All of this leads to more and happier customers.<\/p>\n<p>Check my colleague Alex Russell\u2019s <a href=\"https:\/\/infrequently.org\/2024\/01\/performance-inequality-gap-2024\/\">yearly performance inequality gap blog<\/a>, which shows that premium devices are largely absent from markets with billions of users due to wealth inequality. And this gap is only growing over time.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/infrequently.org\/2024\/01\/performance-inequality-gap-2024\/#device-performance\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"452\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Device performance scores\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/4-device-performance.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Image source: <a href=\"https:\/\/infrequently.org\/2024\/01\/performance-inequality-gap-2024\/#device-performance\">Infrequently Noted<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/4-device-performance.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h2 id=\"built-in-masonry-layout\">Built-in Masonry Layout<\/h2>\n<p>One web platform feature that\u2019s coming soon and which I\u2019m very excited about is CSS Masonry.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/5-css-masonry.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"459\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"CSS Masonry\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/5-css-masonry.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/5-css-masonry.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Let me start by explaining what Masonry is.<\/p>\n<h3 id=\"what-is-masonry\">What Is Masonry<\/h3>\n<blockquote><p>Masonry is a type of layout that was made popular by Pinterest years ago. It creates independent tracks of content within which items pack themselves up as close to the start of the track as they can.<\/p><\/blockquote>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/6-pinterest-portfolio.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"604\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/6-pinterest-portfolio.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"pinterest.com\">Pinterest<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/6-pinterest-portfolio.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Many people see Masonry as a great option for portfolios and photo galleries, which it certainly can do. But Masonry is <strong>more flexible<\/strong> than what you see on Pinterest, and it\u2019s <strong>not limited to just waterfall-like layouts<\/strong>.<\/p>\n<p>In a Masonry layout:<\/p>\n<ul>\n<li>Tracks can be columns or rows:<\/li>\n<\/ul>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/7-layout-columns-rows.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"450\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Masonry layout with columns and rows\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/7-layout-columns-rows.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/7-layout-columns-rows.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li>Tracks of content don\u2019t all have to be the same size:<\/li>\n<\/ul>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/8-layout-different-sizes.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"664\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Masonry layout with tracks of different sizes\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/8-layout-different-sizes.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/8-layout-different-sizes.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li>Items can span multiple tracks:<\/li>\n<\/ul>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/9-layout-multiple-tracks.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"565\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Masonry layout with multiple tracks\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/9-layout-multiple-tracks.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/9-layout-multiple-tracks.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<ul>\n<li>Items can be placed on specific tracks; they don\u2019t have to always follow the automatic placement algorithm:<\/li>\n<\/ul>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/10-layout-items-specific-tracks.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"628\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Masonry layout with items on specific tracks\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/10-layout-items-specific-tracks.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/10-layout-items-specific-tracks.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"demos\">Demos<\/h3>\n<p>Here are a few simple demos I made by using the upcoming implementation of CSS Masonry in Chromium.<\/p>\n<p><a href=\"https:\/\/microsoftedge.github.io\/Demos\/css-masonry\/new-york.html\">A photo gallery demo<\/a>, showing how items (the title in this case) can span multiple tracks:<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/11-photo-gallery-different-sizes.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"560\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A photo gallery demo, showing items on multiple tracks\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/11-photo-gallery-different-sizes.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/11-photo-gallery-different-sizes.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Another <a href=\"https:\/\/microsoftedge.github.io\/Demos\/css-masonry\/nature.html\">photo gallery showing tracks of different sizes<\/a>:<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/12-photo-gallery-different-tracks.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"437\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A photo gallery showing tracks of different sizes\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/12-photo-gallery-different-tracks.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/12-photo-gallery-different-tracks.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>A <a href=\"https:\/\/microsoftedge.github.io\/Demos\/css-masonry\/the-daily-oddity.html\">news site layout<\/a> with some tracks wider than others, and some items spanning the entire width of the layout:<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/13-news-site-layout.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"607\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A news site layout with some tracks wider than others\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/13-news-site-layout.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/13-news-site-layout.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>A <a href=\"https:\/\/microsoftedge.github.io\/Demos\/css-masonry\/kanban.html\">kanban board<\/a> showing that items can be placed onto specific tracks:<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/14-kanban-board.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"320\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A kanban board with items on specific tracks\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/14-kanban-board.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/14-kanban-board.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p><strong>Note<\/strong>: <em>The previous demos were made with a version of Chromium that\u2019s not yet available to most web users, because CSS Masonry is only just starting to be implemented in browsers.<\/em><\/p>\n<p>However, web developers have been happily using libraries to create Masonry layouts for years already.<\/p>\n<h3 id=\"sites-using-masonry-today\">Sites Using Masonry Today<\/h3>\n<p>Indeed, Masonry is pretty common on the web today. Here are a few examples I found besides Pinterest:<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/15-site-masonry.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"458\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Erik Johansson&#039;s photography site\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/15-site-masonry.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Image source: <a href=\"https:\/\/www.erikjo.com\/work\">Erik Johansson<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/15-site-masonry.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/16-masonry-site.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"456\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Kristian Hammerstad&#039;s site\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/16-masonry-site.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Image source: <a href=\"https:\/\/www.kristianhammerstad.com\/\">Kristian Hammerstad<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/16-masonry-site.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/17-masonry-site.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"479\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"L&#039;usine a Gouzou&#039;s catalogue\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/17-masonry-site.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Image source: <a href=\"https:\/\/lusineagouzou.fr\/catalogue\">L&#8217;usine a Gouzou<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/17-masonry-site.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>And a few more, less obvious, examples:<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/18-masonry-layout.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"428\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Masonry layout from Agora\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/18-masonry-layout.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      A row-direction Masonry layout from <a href=\"http:\/\/agora.io\/en\/\">www.agora.io<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/18-masonry-layout.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/19-different-size-tracks.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"633\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Different size tracks from The Free Dictionary\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/19-different-size-tracks.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Different size tracks from <a href=\"https:\/\/www.thefreedictionary.com\/\">www.thefreedictionary.com<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/19-different-size-tracks.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/20-masonry-layout.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"605\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Masonry layout of OneSignal\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/20-masonry-layout.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Image source: <a href=\"https:\/\/onesignal.com\/\">OneSignal<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/20-masonry-layout.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>So, how were these layouts created?<\/p>\n<h2 id=\"workarounds\">Workarounds<\/h2>\n<p>One trick that I\u2019ve seen used is using a Flexbox layout instead, changing its direction to column, and setting it to wrap.<\/p>\n<p>This way, you can place items of different heights in multiple, independent columns, giving the impression of a Masonry layout:<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/21-flexbox-layout.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"578\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Flexbox layout\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/21-flexbox-layout.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/21-flexbox-layout.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>There are, however, two limitations with this workaround:<\/p>\n<ol>\n<li>The order of items is different from what it would be with a real Masonry layout. With Flexbox, items fill the first column first and, when it\u2019s full, then go to the next column. With Masonry, items would stack in whichever track (or column in this case) has more space available.<\/li>\n<li>But also, and perhaps more importantly, this workaround requires that you set a fixed height to the Flexbox container; otherwise, no wrapping would occur.<\/li>\n<\/ol>\n<h2 id=\"third-party-masonry-libraries\">Third-party Masonry Libraries<\/h2>\n<p>For more advanced cases, developers have been using libraries.<\/p>\n<p>The most well-known and popular library for this is simply called <a href=\"https:\/\/masonry.desandro.com\/\">Masonry<\/a>, and it gets downloaded about 200,000 times per week <a href=\"https:\/\/www.npmjs.com\/package\/masonry-layout\">according to NPM<\/a>.<\/p>\n<p>Squarespace also provides a <a href=\"https:\/\/www.beyondspace.studio\/blog\/squarespace-masonry-gallery-layout-guide#method-2-using-gallery-section\">layout component that renders a Masonry layout<\/a>, for a no-code alternative, and many sites use it.<\/p>\n<p>Both of these options use JavaScript code to place items in the layout.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"built-in-masonry\">Built-in Masonry<\/h2>\n<p>I\u2019m really excited that Masonry is now starting to appear in browsers as a built-in CSS feature. Over time, you will be able to use Masonry just like you do Grid or Flexbox, that is, without needing any workarounds or third-party code.<\/p>\n<p>My team at Microsoft has been implementing built-in Masonry support in the Chromium open source project, which Edge, Chrome, and many other browsers are based on. Mozilla was actually the first browser vendor to <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/4650\">propose an experimental implementation of Masonry<\/a> back in 2020. And <a href=\"https:\/\/webkit.org\/blog\/15269\/help-us-invent-masonry-layouts-for-css-grid-level-3\/\">Apple has also been very interested<\/a> in making this new web layout primitive happen.<\/p>\n<p>The work to standardize the feature is also moving ahead, with agreement within the CSS working group about the general direction and even a new display type <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/12022#issuecomment-3525043825\"><code>display: grid-lanes<\/code><\/a>.<\/p>\n<p>If you want to learn more about Masonry and track progress, check out my <a href=\"https:\/\/patrickbrosset.com\/lab\/css-masonry-resources\/\">CSS Masonry resources<\/a> page.<\/p>\n<p>In time, when Masonry becomes a Baseline feature, just like Grid or Flexbox, we\u2019ll be able to simply use it and benefit from:<\/p>\n<ul>\n<li>Better performance,<\/li>\n<li>Better responsiveness,<\/li>\n<li>Ease of use and simpler code.<\/li>\n<\/ul>\n<p>Let\u2019s take a closer look at these.<\/p>\n<h3 id=\"better-performance\">Better Performance<\/h3>\n<p>Making your own Masonry-like layout system, or using a third-party library instead, means you\u2019ll have to run JavaScript code to place items on the screen. This also means that this code will be <em>render blocking<\/em>. Indeed, either nothing will appear, or things won\u2019t be in the right places or of the right sizes, until that JavaScript code has run.<\/p>\n<p>Masonry layout is often used for the main part of a web page, which means the code would be making your main content appear later than it could otherwise have, degrading your <a href=\"https:\/\/web.dev\/articles\/lcp#what-is-lcp\">LCP, or Largest Contentful Paint metric<\/a>, which plays a big role in perceived performance and search engine optimization.<\/p>\n<p>I tested the Masonry JS library with a simple layout and by simulating a slow 4G connection in DevTools. The library is not very big (24KB, 7.8KB gzipped), but it took 600ms to load under my test conditions.<\/p>\n<p>Here is a performance recording showing that long 600ms load time for the Masonry library, and that no other rendering activity happened while that was happening:<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/22-performance-recording.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"541\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A performance recording showing 600ms load time for the Masonry library\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/22-performance-recording.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/masonry-things-you-wont-need-library-anymore\/22-performance-recording.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>In addition, after the initial load time, the downloaded script then needed to be parsed, compiled, and then run. All of which, as mentioned before, was blocking the rendering of the page.<\/p>\n<p>With a built-in Masonry implementation in the browser, we won\u2019t have a script to load and run. The browser engine will just do its thing during the initial page rendering step.<\/p>\n<h3 id=\"better-responsiveness\">Better Responsiveness<\/h3>\n<p>Similar to when a page first loads, resizing the browser window leads to rendering the layout in that page again. At this point, though, if the page is using the Masonry JS library, there\u2019s no need to load the script again, because it\u2019s already here. However, the code that moves items in the right places needs to run.<\/p>\n<p>Now this particular library seems to be pretty fast at doing this when the page loads. However, it animates the items when they need to move to a different place on window resize, and this makes a big difference.<\/p>\n<p>Of course, users don\u2019t spend time resizing their browser windows as much as we developers do. But this animated resizing experience can be pretty jarring and adds to the perceived time it takes for the page to adapt to its new size.<\/p>\n<h3 id=\"ease-of-use-and-simpler-code\">Ease Of Use And Simpler Code<\/h3>\n<p>How easy it is to use a web feature and how simple the code looks are important factors that can make a big difference for your team. They can\u2019t ever be as important as the final user experience, of course, but developer experience impacts maintainability. Using a built-in web feature comes with important benefits on that front:<\/p>\n<ul>\n<li>Developers who already know HTML, CSS, and JS will most likely be able to use that feature easily because it\u2019s been designed to integrate well and be consistent with the rest of the web platform.<\/li>\n<li>There\u2019s no risk of breaking changes being introduced in how the feature is used.<\/li>\n<li>There\u2019s almost zero risk of that feature becoming deprecated or unmaintained.<\/li>\n<\/ul>\n<p>In the case of built-in Masonry, because it\u2019s a layout primitive, you use it from CSS, just like Grid or Flexbox, no JS involved. Also, other layout-related CSS properties, such as gap, work as you\u2019d expect them to. There are no tricks or workarounds to know about, and the things you do learn are documented on MDN.<\/p>\n<p>For the Masonry JS lib, initialization is a bit complex: it requires a data attribute with a specific syntax, along with hidden HTML elements to set the column and gap sizes.<\/p>\n<p>Plus, if you want to span columns, you need to include the gap size yourself to avoid problems:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-html\">&lt;script src=\"https:\/\/unpkg.com\/masonry-layout@4.2.2\/dist\/masonry.pkgd.min.js\"&gt;&lt;\/script&gt;\n&lt;style&gt;\n  .track-sizer,\n  .item {\n    width: 20%;\n  }\n  .gutter-sizer {\n    width: 1rem;\n  }\n  .item {\n    height: 100px;\n    margin-block-end: 1rem;\n  }\n  .item:nth-child(odd) {\n    height: 200px;\n  }\n  .item--width2 {\n    width: calc(40% + 1rem);\n  }\n&lt;\/style&gt;\n\n&lt;div class=\"container\"\n  data-masonry='{ \"itemSelector\": \".item\", \"columnWidth\": \".track-sizer\", \"percentPosition\": true, \"gutter\": \".gutter-sizer\" }'&gt;\n  &lt;div class=\"track-sizer\"&gt;&lt;\/div&gt;\n  &lt;div class=\"gutter-sizer\"&gt;&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;&lt;\/div&gt;\n  &lt;div class=\"item item--width2\"&gt;&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;&lt;\/div&gt;\n  ...\n&lt;\/div&gt;\n<\/code><\/pre>\n<\/div>\n<p>Let\u2019s compare this to what a built-in Masonry implementation would look like:<\/p>\n<pre><code class=\"language-html\">&lt;style&gt;\n  .container {\n    display: grid-lanes;\n    grid-lanes: repeat(4, 20%);\n    gap: 1rem;\n  }\n  .item {\n    height: 100px;\n  }\n  .item:nth-child(odd) {\n    height: 200px;\n  }\n  .item--width2 {\n    grid-column: span 2;\n  }\n&lt;\/style&gt;\n\n&lt;div class=\"container\"&gt;\n  &lt;div class=\"item\"&gt;&lt;\/div&gt;\n  &lt;div class=\"item item--width2\"&gt;&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;&lt;\/div&gt;\n  ...\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>Simpler, more compact code that can just use things like <code>gap<\/code> and where spanning tracks is done with <code>span 2<\/code>, just like in grid, and doesn\u2019t require you to calculate the right width that includes the gap size.<\/p>\n<h2 id=\"how-to-know-what-s-available-and-when-it-s-available\">How To Know What\u2019s Available And When It\u2019s Available?<\/h2>\n<p>Overall, the question isn\u2019t really if you should use built-in Masonry over a JS library, but rather <em>when<\/em>. The Masonry JS library is amazing and has been filling a gap in the web platform for many years, and for many happy developers and users. It has a few drawbacks if you compare it to a built-in Masonry implementation, of course, but those are not important if that implementation isn\u2019t ready.<\/p>\n<p>It\u2019s easy for me to list these cool new web platform features because I work at a browser vendor, and I therefore tend to know what\u2019s coming. But developers often share, survey after survey, that keeping track of new things is hard. <strong>Staying informed is difficult<\/strong>, and companies don\u2019t always prioritize learning anyway.<\/p>\n<p>To help with this, here are a few resources that provide updates in simple and compact ways so you can get the information you need quickly:<\/p>\n<ul>\n<li><a href=\"https:\/\/web-platform-dx.github.io\/web-features-explorer\/\">The Web platform features explorer site<\/a>:\n<ul>\n<li>You might be interested in its <a href=\"https:\/\/web-platform-dx.github.io\/web-features-explorer\/release-notes\/october-2025\/\">release notes<\/a> page.<\/li>\n<li>And, if you like RSS, check out <a href=\"https:\/\/web-platform-dx.github.io\/web-features-explorer\/release-notes.xml\">the release notes feed<\/a>, as well as the Baseline <a href=\"https:\/\/web-platform-dx.github.io\/web-features-explorer\/newly-available.xml\">Newly Available<\/a> and <a href=\"https:\/\/web-platform-dx.github.io\/web-features-explorer\/widely-available.xml\">Widely Available<\/a> feeds.<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/webstatus.dev\/\">The Web Platform Status dashboard<\/a>:\n<ul>\n<li>You might like its various <a href=\"https:\/\/webstatus.dev\/?q=baseline_date%3A2025-01-01..2025-12-31\">Baseline year<\/a> pages.<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/chromestatus.com\/roadmap\">Chrome Platform Status\u2019 roadmap page<\/a>.<\/li>\n<\/ul>\n<p>If you have a bit more time, you might also be interested in browser vendors\u2019 release notes:<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.chrome.com\/release-notes\">Chrome<\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoft-edge\/web-platform\/release-notes\/\">Edge<\/a><\/li>\n<li><a href=\"https:\/\/www.firefox.com\/en-US\/releases\/\">Firefox<\/a><\/li>\n<li><a href=\"https:\/\/developer.apple.com\/documentation\/safari-release-notes\">Safari<\/a><\/li>\n<\/ul>\n<p>For even more resources, check out my <a href=\"https:\/\/patrickbrosset.com\/lab\/navigating-the-web-platform\/\">Navigating the Web Platform Cheatsheet<\/a>.<\/p>\n<h2 id=\"my-thing-is-still-not-implemented\">My Thing Is Still Not Implemented<\/h2>\n<p>That\u2019s the other side of the problem. Even if you do find the time, energy, and ways to keep track, there\u2019s still frustration with getting your voice heard and your favorite features implemented.<\/p>\n<p>Maybe you\u2019ve been waiting for years for a specific bug to be resolved, or a specific feature to ship in a browser where it\u2019s still missing.<\/p>\n<p>What I\u2019ll say is <strong>browser vendors do listen<\/strong>. I\u2019m part of several cross-organization teams where we discuss developer signals and feedback all the time. We look at many different sources of feedback, both internal at each browser vendor and external\/public on forums, open source projects, blogs, and surveys. And, we\u2019re always trying to create better ways for developers to share their specific needs and use cases.<\/p>\n<p>So, if you can, please demand more from browser vendors and pressure us to implement the features you need. I get that it takes time, and can also be intimidating (not to mention a high barrier to entry), but it also works.<\/p>\n<p>Here are a few ways you can get your (or your company\u2019s) voice heard: Take the annual <a href=\"https:\/\/stateofjs.com\/\">State of JS<\/a>, <a href=\"https:\/\/stateofcss.com\/\">State of CSS<\/a>, and <a href=\"https:\/\/stateofhtml.com\/\">State of HTML<\/a> surveys. They play a big role in how browser vendors prioritize their work.<\/p>\n<p>If you need a specific standard-based API to be implemented consistently across browsers, consider submitting a proposal at the next <a href=\"https:\/\/github.com\/web-platform-tests\/interop\/\">Interop project<\/a> iteration. It requires more time, but consider how <a href=\"https:\/\/docs.google.com\/document\/d\/1ICqlNtdRXlhIlRuXFr1BRgy68R6Q5AwPv2b4hsIWUMY\/edit\">Shopify<\/a> and <a href=\"https:\/\/www.rumvision.com\/blog\/interop-2026-key-apis-for-sitespeed-and-rum\/\">RUMvision<\/a> shared their wish lists for Interop 2026. Detailed information like this can be very useful for browser vendors to prioritize.<\/p>\n<p>For more useful links to influence browser vendors, check out my <a href=\"https:\/\/patrickbrosset.com\/lab\/navigating-the-web-platform\/\">Navigating the Web Platform Cheatsheet<\/a>.<\/p>\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>To close, I hope this article has left you with a few things to think about:<\/p>\n<ul>\n<li>Excitement for Masonry and other upcoming web features.<\/li>\n<li>A few web features you might want to start using.<\/li>\n<li>A few pieces of custom or 3rd-party code you might be able to remove in favor of built-in features.<\/li>\n<li>A few ways to keep track of what\u2019s coming and influence browser vendors.<\/li>\n<\/ul>\n<p>More importantly, I hope I\u2019ve convinced you of the benefits of using the web platform to its full potential.<\/p>\n<div class=\"signature\">\n  <img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" class=\"lazyload\" data-src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\"><br \/>\n  <span>(yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Masonry: Things You Won\u2019t Need A Library For Anymore Masonry: Things You Won\u2019t Need A Library For Anymore Patrick Brosset 2025-12-02T10:00:00+00:00 2025-12-04T20:33:04+00:00 About 15 years ago, I was working at a company where we built apps for travel agents, airport workers, and airline companies. We also built our own in-house framework for UI components and&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[],"_links":{"self":[{"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts\/1120"}],"collection":[{"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/comments?post=1120"}],"version-history":[{"count":1,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts\/1120\/revisions"}],"predecessor-version":[{"id":1121,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts\/1120\/revisions\/1121"}],"wp:attachment":[{"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/media?parent=1120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/categories?post=1120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/tags?post=1120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}