6 ms·

CSS Grid Lanes

754 points by frizlab 10mo ago

swyx 10mo ago
how does it work with animations? like if i transition:all and then remove a middle img does the other elements get animated?
- qingcharles 10mo ago
  I guess wire up a codepen demo and try it out. I know the guys writing this were well aware of all the edge cases like that and these are some of the absolute smartest CSS people you can think of who had to write the very detailed spec for this. I don't think the smooth reflow made it into the current spec, so I guess watch this space? https://www.w3.org/TR/css-grid-3/ https://www.w3.org/TR/css-grid-3/
jonah 10mo ago
This is exciting to see! I just used Masonry for a project this past week. While it works quite well and is pretty performant, it is pretty hacky using absolute positioning, wanting to know the aspect ratios of objects beforehand for smoother layout, and having to recalculate everything on resize. I'm looking forward to having a generally available native option one of these days.
- aag 10mo ago
  Me, too. I like masonry layout too much to wait for CSS to solve the problem, so I've been waiting to remove the last 1.3KB of Javascript from my home page since 2019. Thank you to everyone who is making this happen.
- mmis1000 10mo ago
  There is way to create masonry without specifying x,y position of every element though. https://codepen.io/mmis1000/pen/gOyZJqE https://codepen.io/mmis1000/pen/gOyZJqE Adding a new element still need dimension of the element and a bit JavaScript.(The whole page use < 100loc unobfuscated JavaScript) But resizing can be handled by css naturally. I think the issue here is most people don't really have a good way to specify how masonry should work. And thus don't have a good implementation either.
- Zardoz84 10mo ago
  There is ways of create a basic masonery layouts using only pure CSS grid. But dependes on the use case. Take this example where are mixed cards without images, only text, and with images plus text. https://codepen.io/zardoz89/pen/KKVEGbw https://codepen.io/zardoz89/pen/KKVEGbw
memonkey 10mo ago
Masonry grid layout was one of a few interviewing pair programming tests I would give to frontend engineers. I need to see how this works under the hood!
valleyer 10mo ago
Is this increasing complexity in the Web layout world worth it? Anyone who wants to use this is going to drop support for older browsers (and, in so doing, older machines that can't run newer OSes and newer browsers). Personally, I use an 11-year-old machine and have had to add userscript hacks to certain major Web sites to work around bugs in CSS grid (not the "lanes" described here). At least new JavaScript features can be "polyfilled" or whatever. Maybe sites could check for CSS feature support too? But they seem not to. For example, the demo page linked in the article fails pretty unusably for me. All the images take up nearly the full viewport width.
- jimvdv 10mo ago
  Not updating your browser will net you tons of exploitable vulnerabilities. How do you expect things to ever change if no one ever updates? Certainly even if you decide to lean towards maximum support it’s still a positive these features are being introduced so you can use them in 10 years.
  - hackyhacky 10mo ago
    > How do you expect things to ever change if no one ever updates? Maybe things should stop changing. We don't really need ten new CSS attributes every year. Things work. The elegant solution is to announce the project is done. That would bring some much-needed stability. Then we can focus on keeping things working.
    - runarberg 10mo ago
      11 years ago we had Python 2.7.8 and 3.4.0 so no type hints, no async await, no match syntax, no formatted string literals, large number couldn’t be written like this 13_370_000_000, etc. Developers deserve nice things.
      - hackyhacky 10mo ago
        > Developers deserve nice things. I agree they do. But Python is a bad counterexample. You can upgrade your Python on your server and no one has to know about it. But if you want to use new CSS features, then every browser has to implement that feature and every user has to upgrade their browser. The intent of my comment was to express a desire to stabilize the web API in particular, not to freeze all software development in its tracks.
phoronixrly 10mo ago
Oh, how cool! Another barrier to a new browser gaining user base!
ThatMedicIsASpy 10mo ago
I've run the masonry layout (for my personal bookmark website) ever since I've found it in the browser settings. grid-template-rows: masonry; is going to be outdated then?
- miiiiiike 10mo ago
  Yeah, there was a years long debate that effectively ended with: “We held a vote that you weren’t aware of and decided that masonry was out. If you cared, you should have participated in the vote that you were not aware was happening. It’s too late to change it.” https://m.youtube.com/watch?v=yikbSQ6tvlE https://m.youtube.com/watch?v=yikbSQ6tvlE
  - culi 10mo ago
    Wasn't Firefox the only browser that actually implemented `grid-template-rows: masonry` anyways? It sucks whenever browsers backtrack on a W3C standard that reached "Working Draft" status but it doesn't seem like it's gonna impact many people Besides, it's not being "deprecated". It will continue to work as it does. We just have a better alternative that the big 3 all agreed on.
  - afavour 10mo ago
    Masonry was never “in”, no? Mozilla proposed it and were the only ones to implement it, behind a feature flag. Then WebKit proposed an alternative that was discussed at length: https://github.com/w3c/csswg-drafts/issues/10233 https://github.com/w3c/csswg-drafts/issues/10233
    - miiiiiike 10mo ago
      People have been dragging their feet on subgrid, masonry, etc for almost a decade. I followed it pretty closely for years but stopped when it started turning into a Christopher Guest mockumentary. Masonry or grid-lanes, who cares? I’m just glad masonry (the feature, Baseline 20XX) and subgrid (Baseline 2023) are finally here.
  - JimDabell 10mo ago
brcmthrowaway 10mo ago
I don't understand all the busywork goes behind new browser updates, just to retain their market share (since they can afford more engineers, than say Ladybird). Is this needed? It's not rocket science, folks.
- fragmede 10mo ago
  Psh, rocket science only has to contend with physics, which generally doesn't change much, if at all. The equations used to get humans to the moon didn't change because someone discovered you can send a specially crafted packet and escape the sandbox and steal money from everybody on the Internet.
- concinds 10mo ago
  All these CSS upgrades have been meant to reduce the need for Javascript for all the things web devs do out there in the real world. It's a good thing. You should tune out more of the ambient cynicism because it's ignorant and unhinged. People who don't follow any standards discussions, don't talk to web devs, don't read anything except headlines and who are only imitating the attitudes of whatever cynical, depressed social media bubble they fell into.
nitwit005 10mo ago
How would you query the location where you need to load more data when scrolling down (the highest empty spot)?
- jonah 10mo ago
  You just append new <figure> elements to the <main> in the example and it will automatically put them in the appropriate column.
  - nitwit005 10mo ago
    Your answer doesn't appear to relate to what I asked. You need to know when to query the backend for more data if it's an infinite scrolling setup.
    - jonah 10mo ago
      Aahh. The way you phrased your question was pretty ambiguous. The other posters have good answers. One thing to consider for a smooth interaction would be to eagerly load the next x elements before they scroll into view.
      - pcl 10mo ago
        Yeah I’d assume you’d eagerly load enough to make sure everything gets at least partially into the viewport, and maybe a fee more to optimize for network latency. And then perhaps track elements whose trailing ends are not in the viewport, and load more once those become fully visible?
- tom1337 10mo ago
  I guess you can just start loading a first batch, add an intersection observer to the last 3 elements (if you have 3 lanes) and then when one of those intersects you simply start fetching the next.
  - notpushkin 10mo ago
culi 10mo ago
Props to the Safari team. They surprised us all when they suddenly shot to the top of interop-2025 this October https://wpt.fyi/interop-2025 https://wpt.fyi/interop-2025
- ChadNauseam 10mo ago
  I didn't realize it was tracked like this, but I have noticed that as of iOS 26, Safari has gotten a huge number of great web features. It has WebGPU of course, but many small things like fixing up missing parts of the OPFS API that make it actually usable now. Now they even have the field-sizing CSS property [0], fixing imo the most glaring ommission from CSS: the inability to make text input boxes grow to fit the input text! [0]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/field-sizing https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
  - rendaw 10mo ago
    I thought that was supposed to be fixed by contenteditable plaintext-only. Why was field sizing still necessary?
    - hombre_fatal 10mo ago
      At least recreate their demo for us to showcase the fix. But I feel like it would be a let down that answers your question.
    - extra88 10mo ago
      `contenteditable` is an HTML attribute but it depends on JavaScript to do anything useful. This problem is one of layout, CSS's domain, so `field-sizing` solves it while leaving HTML form elements to do the actual job of taking input.
- neo_doom 10mo ago
  Fascinating tracker. So we started 2025 with nearly every browser under 80% and ending the year with every browser with >98% interop? That's a lot of amazing work done by a lot of teams. Incredible!
cod1r 10mo ago
sweeeeeeeeeeeet
uniq7 10mo ago
Maybe this will be an unpopular opinion, but I really dislike the lane layout, because it is not possible to efficiently take a glance at all elements in the list, one by one. If you try to go left-to-right, you will quickly realize that at the end of each "line" it is really difficult to know where the next line starts. It is easy to accidentally start again on the same line (and inspect the same elements), or skip one accidentally. Then navigating through the elements one by one requires a considerable amount of cognitive effort, your eyes bounce up and down constantly, and you end up inspecting the same elements multiple times. If you try to go top-to-bottom, lane by lane, you will then realize that the page also has infinite scroll and you will never go past the first lane.
- Tempest1981 10mo ago
  Feels very "right-brain". I'm a brain-hemisphere equality advocate. Good for sites like Pinterest. But also Home Assistant.
- aidenn0 10mo ago
  I think it's one of those things that looks good, but is annoying to use non-superficially.
  - j_w 10mo ago
    IMO it's annoying to use at all. It just looks "good" (subjective). Larger images dominate and flashy images become more important to get attention (if bringing focus to an image is the idea). An extremely poor way to present information.
- sippeangelo 10mo ago
  Thankfully the feature is just in time for it to fall out of fashion! It really is an awful layout, UX wise. But at least it looks pretty at a glance!
- ethmarks 10mo ago
  But if you don't need to systematically examine every element one-by-one, lane layouts are pretty good. Sites like Pintrest use lane layouts because their content isn't meant to by systematically examined, but rather absorbed at a glance. If your content is meant to be systematically examined, using a lane layout would be a bad UX choice. But just because lane layouts can be misused doesn't mean they're a bad layout.
jbritton 10mo ago
I have often thought layouts should be done by a constraint solver. Then there could be libraries that help simplify specifying a layout, which feed constraints to the solver.
- eurleif 10mo ago
  Recently discussed on HN: https://news.ycombinator.com/item?id=46144039 https://news.ycombinator.com/item?id=46144039
- hansvm 10mo ago
  I've done that for desktop apps before. You have to be careful with the effects of sub-pixel rendering and whatnot if your math is continuous, but it's a viable path that I quite like.
  - marcosdumay 10mo ago
    Don't use continuous math in either a design system nor a constraint solver that you expect random developers to use. Either case will only lead to problems.
    - hansvm 10mo ago
      I largely agree, but there's a little nuance insofar as "interior-point" methods are very powerful. You can go a long way by encoding your goals as error functions and letting a gradient-based optimizer do the rest.
- jacobp100 10mo ago
  iOS used to do this using the Cassowary constraint solver pre-SwiftUI. It’s the worst thing to work with. So much code turning on and off constraints, dynamically adding constraints when you have new views. And that’s before you get into conflicts
deleted 10mo ago
[deleted]
jeroenhd 10mo ago
I have to ask, like with all the other browser specific trial implementations: how is cross platform support? If we wanted to make a grid layout that only worked in one browser engine, grid-template-rows: masonry was there for a while now. Chromium still seems to be working on support it seems based on https://cr-status.appspot.com/feature/5149560434589696 https://cr-status.appspot.com/feature/5149560434589696 so maybe it'll be useful soon? That page indicates that they're still discussing certain parts of the spec.
- qingcharles 10mo ago
  It's been on-and-off in all three browsers behind flags etc, but it's been in a constant state of flux over the last three years. One of the most gnarly new CSS features to get right. Lots of great arguments about how to implement it.
emilbratt 10mo ago
I always thought that the masonry layout looked good but made it harder to get a good overview of the images.
- Sharlin 10mo ago
  The biggest problem is that it's good if your images are all landscape or all portrait, but not when mixed.
  - SahAssar 10mo ago
    The whole point of a masonry layout is if you have different aspect ratios. Otherwise a masonry layout is just a normal grid.
    - Sharlin 10mo ago
      Masonry layout fixes one of the dimensions. That means either portrait or landscape images will look visibly smaller than those of the inverse aspect ratio, because their longer side must be the same length as the latter’s shorter side. Masonry works well if you have different aspect ratios of the same orientation.
      - powersnail 10mo ago
        Just curious, what algorithm is good for laying out images of arbitrary orientations, sizes, and aspect ratios? That seems like a pretty difficult problem. Some sort of variation of knapsack problem maybe?
        emilbratt 10mo ago
        I dont know what would be the best way, but I personally want each image to be represented correctly in relation to all other image. This means that the way images are laid out will looked jagged. However, as a consequence of that, it is easy to find back to a specific image. Its like when you are coding, you look at the "shape" of the code when scrolling to find that specific function definition etc.. Here is an example of the layout of a photostream that I was satisfied with. https://frifoto.emilbratt.no/?view_mode=photo-stream&tag=Allvi https://frifoto.emilbratt.no/?view_mode=photo-stream&tag=All...
oefrha 10mo ago
I've been using Chromium's display: masonry in some internal apps since they introduced it behind a flag in Chromium 140. Looks like they just have to rename it now?
- qingcharles 10mo ago
  I have too. And the Safari version that was in the betas/tech previews. One of the biggest arguments over the last couple of years was what to call it. A lot, lot of ideas put forth as alternatives to "masonry" which wasn't thought to be great for non-English speakers. I'm glad they finally nailed a name for it! The other big argument was over how to activate it. Is it a grid? Is it a flexbox? Is it a brand new animal? Now I just need to figure out the best way to implement this semantically with a polyfill for the next 30 months until it's baseline.
  - oefrha 10mo ago
    I actually started using Safari's `grid-template-rows: masonry` when it came out, but unfortunately Safari TP crashed a lot on me when using that for some reason. Chromium's never had a problem.
acjohnson55 10mo ago
Very cool! I wonder, will it be easy to build interactive interfaces on this primitive, like animations and drag-and-drop?
snooooooooooore 10mo ago
Is anyone working on actual css problems instead of this sugar syntax? Hypermedia suffers because these marketing companies waste time on making sure they can build Pinterest in 10 LoC instead of fixing actual long running hypermedia domains.
- pcl 10mo ago
  Moving this sort of stuff out of JavaScript and arcane hacks allows the browser rendering engines to optimize these common patterns. This is sorta the opposite of syntactic sugar. The syntactic sugar is the libraries that implemented these patterns without rendering support. Shall we call it syntactic umami perhaps? Or syntactic lipids?
ray_v 10mo ago
If I ever encounter, and need to read a webpage with arbitrarily sized and placed grids of text, please somebody just shoot me. https://webkit.org/wp-content/uploads/Grid-Lanes-newspaper-demo-dark.png https://webkit.org/wp-content/uploads/Grid-Lanes-newspaper-d...
- arewethereyeta 10mo ago
  what's your problem?
- 2cynykyl 10mo ago
  Funny, I think that looks gorgeous!
- jlaternman 10mo ago
  I think this looks great too. Finally replicating the efficiency of newspaper layouts. No enforced symmetry, just content in an optimal space. I want.
  - deleted 10mo ago
    [deleted]
  - snackbroken 10mo ago
    It looks pretty, but fails at basic usability. After reading the top-left block of text titled "Optimizing Webkit & Safari for Spedometer 3.0", what the fuck am I supposed to read next? Am I meant to go recursively column by column, or try to scrutinize pixels to determine which of the blocks are further up than the others, skipping haphazardly left and right across the page? A visual aid: https://imgur.com/a/0wHMmBG https://imgur.com/a/0wHMmBG Columnar layout is FUNDAMENTALLY BROKEN on media that doesn't have two fixed-size axes. Web layouts leave one axis free to expand as far as necessary to fit the content, so there is no sane algorithm for laying out arbitrary content this way. Either you end up with items ordered confusingly, or you end up having to scroll up and down repeatedly across the whole damn page, which can be arbitrarily long. Either option is terrible. Don't even get me started on how poorly this interacts with "infinite scroll".
wackget 10mo ago
I wish they'd release CSS Gap Decorations: https://developer.chrome.com/blog/gap-decorations https://developer.chrome.com/blog/gap-decorations I'm tired of having to use stupid hacks to get nice-looking borders between flex/grid items.
- rahkiin 10mo ago
  Have you considered using tables? It is funny how we keep asking more and more and more even though we already have it so much better than before. Can we never be happy with what we have?
  - selfmodruntime 10mo ago
    > It is funny how we keep asking more and more and more even though we already have it so much better than before. I've been developing web stuff for 15 years now and sometimes I can't believe comments like these. We didn't have it "so much better before". CSS sucked hard and getting things right for three devices was an incredible pain in the ass. Tables have semantic meaning. They don't support fractional units. Reflowing for mobile is impossible and you need JS hacks like splitting tables. You can't reorder natively.
    - spencerflem 10mo ago
      Tbf it said “we have it so much better Than before” I think they agree with you
    - alwillis 10mo ago
      I saw a similar comment on HN recently that CSS was "better" back in the day and what we have today is either unnecessary or too hard. I reminded that person we had to use floats and positioning hacks and abuse HTML tables for page layout before flexbox and CSS Grid were created. There was no way simple method to center a div!
    - perardi 10mo ago
      I have been developing web stuff for 20 years now and I also can’t believe comments like these. Flex and grid enable layouts that are far beyond anything we could do with table layouts. Anyone who claims otherwise has obviously not done any amount of serious, production FE UI design and development. Are there bits of DX ergonomics I’d like in flex and grid? Of course. Does the syntax sometimes feel a bit arcane? Yeah. But the raw power is there, and anyone who claims the contrary is either a gormless backend developer, or some troll who is trying to design things in MS Word.
GaryBluto 10mo ago
To quote the wise Karl Pilkington: "Do we need 'em?" HTML has become more and more bloated. How many methods do we need to do something that was possible back in the 90s?
- willio58 10mo ago
  While I like a Karl Pilkington quote as much as the next guy, I really do want this. I have one specific use case for this layout that's always felt a little bit painful to reach into js for. I can't wait for the day I can simplify that further into native CSS.
- ezequiel-garzon 10mo ago
  How was this masonry layout possible back in the 90s?
  - GaryBluto 10mo ago
    Tables.
- gherkinnn 10mo ago
  There is no winning, is there? Half of HN wants browsers to revert to document readers and the other half wants HTML and CSS to do what JS can. A small minority then insists that we should get rid of HTML and CSS entirely and start from scratch. The louder the ideas the further away the person is from actually using the tech. I personally would not have the patience for community management. That said, CSS masonry looks solid.
- alwillis 10mo ago
  > HTML has become more and more bloated. How many methods do we need to do something that was possible back in the 90s? This is incorrect. Lots of old stuff was removed or deprecated from the HTML5 specification; elements like `s`, `u` were repurposed from being presentational to semantic: - acronym - applet - basefont - big - center - dir - font - frame - frameset - isindex - noframes - s - strike - tt - u - xmp - noembed - plaintext
ricksunny 10mo ago
I wonder how long it takes LLMs to correctly ingest fresh CSS notation like this.
todotask2 10mo ago
I think Apple should make Safari stable downloadable option for all platforms.
- speedgoose 10mo ago
  I’m old enough to have installed Safari on Windows XP. I’m not sure it has been enough years since this Apple failed product.
  - kuekacang 10mo ago
    experiencing how text renders differently, slowly, with my potato battleship
- jacobp100 10mo ago
  This might actually happen indirectly. Kagi’s new browser uses WebKit. macOS only now, but eventually it’ll come to windows
  - todotask2 10mo ago
    I have been using Kagi Orion on macOS and iPhone, so far so good.
- alwillis 10mo ago
  There are WebKit-based browsers for Linux: https://webkit.org/downloads/ https://webkit.org/downloads/
imbnwa 10mo ago
What’s the best resource for getting a handle on all modern CSS for someone who hasn’t paid attention since flex box
- satvikpendem 10mo ago
  I like Josh W Comeau's content, he has a lot of free articles, but his paid CSS course goes through step by step why CSS is the way that it is, worked great for me for understanding it all. My work paid for it though, that's why it's priced so high, but I'm sure he has discounts for individuals.
- alwillis 10mo ago
  This should be a good start: https://nerdy.dev/cascading-secret-sauce https://nerdy.dev/cascading-secret-sauce
- perardi 10mo ago
  There are a lot of resources. I am a fan of: https://www.youtube.com/@KevinPowell https://www.youtube.com/@KevinPowell Kevin is a no-nonsense no-hype educator. He will keep you up to date without a lot of engagement hacking.
nakedneuron 10mo ago
Is there anything to be said about accessibility? Found the word only once in the comments.
- mattlondon 10mo ago
  They mentioned tabbing and screen readers quite a few times. I found the "jumping" ordering quite concerning but further down in the article they mention "tolerance" that seems to be a way to allow the layout to be more consistent in terms of ordering.
interstice 10mo ago
Kinda odd they didn't call it masonry given it's already been called that forever. At least grid-lanes is reasonably self explanatory.
- pbowyer 10mo ago
  I'm pleased they rename it because grid-lanes opens up more than masonry layouts. I've been waiting to be able to have a fully responsive layout (where interleave sidebar content in with the page content on small screens, but have it in a sidebar on larger screens) without using any JavaScript, and this finally makes it possible. Demo: https://codepen.io/pbowyer/pen/raLBVaV https://codepen.io/pbowyer/pen/raLBVaV Previous comment: https://news.ycombinator.com/item?id=46228993 https://news.ycombinator.com/item?id=46228993
- qingcharles 10mo ago
  The naming was half the discussion on implementing this. There were a lot of people smarter and more knowledgeable than me that had a lot of opinions on the name that I hadn't thought about. I remember one of the reasons was that the word "masonry" wasn't as obvious a concept for non-English speakers.
nehalem 10mo ago
There is an element of tragic comedy to those announcement. While remarkable on their own, everybody knows that one cannot use any new browser feature reliably any time soon due to Apple not shipping continuous updates to the browsers they force upon their users.
- hu3 10mo ago
  iOS from 2 versions prior don't get latest Safari? I can't check because my wife's iPhone is, regrettably according to her, "updated to the latest glAss version".
  - 8n4vidtmkvmk 10mo ago
    I know one of my clients complained something didnt work on their few year old iPad. So.. I don't know what the cutoff is but clearly not everything updates regularly. He did try updating it manually too but couldn't.
- robertoandred 10mo ago
  Safari got a big update last week.
  - mrgoldenbrown 10mo ago
    Safari in general got an update, or Safari on only the devices Apple deems worthy? Usually Apple limits Safari updates to new phones.
    - robertoandred 10mo ago
      Do you consider six-year-old phones new? What about seven-year-old Macs?
      - culi 10mo ago
        I think the iPhone X is the newest model that is no longer receiving iOS updates. That came out in 2017. So 8 years ago
prakashn27 10mo ago
That makes sense. Safari is so smooth now in iOS. Moved from Firefox.
noitpmeder 10mo ago
Any ideas how I can track support for this in firefox?
- herpdyderp 10mo ago
  It seems that support tracking websites don't know what this is yet. MDN briefly notes it as an option for `display` but there is no other mention of it.
temporallobe 10mo ago
It’s always nice to see native implementations of functionality pioneered by third-party libraries. Bootstrap, for example, has made this kind layout (somewhat) possible but there is also a Masonry plugin that simplifies it.
ericarogulski 10mo ago
[dead]

754 points by frizlab 10mo ago

swyx 10mo ago

how does it work with animations? like if i transition:all and then remove a middle img does the other elements get animated?

qingcharles 10mo ago
I guess wire up a codepen demo and try it out. I know the guys writing this were well aware of all the edge cases like that and these are some of the absolute smartest CSS people you can think of who had to write the very detailed spec for this. I don't think the smooth reflow made it into the current spec, so I guess watch this space? https://www.w3.org/TR/css-grid-3/ https://www.w3.org/TR/css-grid-3/

jonah 10mo ago

This is exciting to see! I just used Masonry for a project this past week. While it works quite well and is pretty performant, it is pretty hacky using absolute positioning, wanting to know the aspect ratios of objects beforehand for smoother layout, and having to recalculate everything on resize. I'm looking forward to having a generally available native option one of these days.

aag 10mo ago
Me, too. I like masonry layout too much to wait for CSS to solve the problem, so I've been waiting to remove the last 1.3KB of Javascript from my home page since 2019. Thank you to everyone who is making this happen.
mmis1000 10mo ago
There is way to create masonry without specifying x,y position of every element though. https://codepen.io/mmis1000/pen/gOyZJqE https://codepen.io/mmis1000/pen/gOyZJqE Adding a new element still need dimension of the element and a bit JavaScript.(The whole page use < 100loc unobfuscated JavaScript) But resizing can be handled by css naturally. I think the issue here is most people don't really have a good way to specify how masonry should work. And thus don't have a good implementation either.
Zardoz84 10mo ago
There is ways of create a basic masonery layouts using only pure CSS grid. But dependes on the use case. Take this example where are mixed cards without images, only text, and with images plus text. https://codepen.io/zardoz89/pen/KKVEGbw https://codepen.io/zardoz89/pen/KKVEGbw

memonkey 10mo ago

Masonry grid layout was one of a few interviewing pair programming tests I would give to frontend engineers. I need to see how this works under the hood!

valleyer 10mo ago

Is this increasing complexity in the Web layout world worth it? Anyone who wants to use this is going to drop support for older browsers (and, in so doing, older machines that can't run newer OSes and newer browsers). Personally, I use an 11-year-old machine and have had to add userscript hacks to certain major Web sites to work around bugs in CSS grid (not the "lanes" described here). At least new JavaScript features can be "polyfilled" or whatever. Maybe sites could check for CSS feature support too? But they seem not to. For example, the demo page linked in the article fails pretty unusably for me. All the images take up nearly the full viewport width.

jimvdv 10mo ago
Not updating your browser will net you tons of exploitable vulnerabilities. How do you expect things to ever change if no one ever updates? Certainly even if you decide to lean towards maximum support it’s still a positive these features are being introduced so you can use them in 10 years.
- hackyhacky 10mo ago
  > How do you expect things to ever change if no one ever updates? Maybe things should stop changing. We don't really need ten new CSS attributes every year. Things work. The elegant solution is to announce the project is done. That would bring some much-needed stability. Then we can focus on keeping things working.
  - runarberg 10mo ago
    11 years ago we had Python 2.7.8 and 3.4.0 so no type hints, no async await, no match syntax, no formatted string literals, large number couldn’t be written like this 13_370_000_000, etc. Developers deserve nice things.
    - hackyhacky 10mo ago
      > Developers deserve nice things. I agree they do. But Python is a bad counterexample. You can upgrade your Python on your server and no one has to know about it. But if you want to use new CSS features, then every browser has to implement that feature and every user has to upgrade their browser. The intent of my comment was to express a desire to stabilize the web API in particular, not to freeze all software development in its tracks.

phoronixrly 10mo ago

Oh, how cool! Another barrier to a new browser gaining user base!

ThatMedicIsASpy 10mo ago

I've run the masonry layout (for my personal bookmark website) ever since I've found it in the browser settings. grid-template-rows: masonry; is going to be outdated then?

miiiiiike 10mo ago
Yeah, there was a years long debate that effectively ended with: “We held a vote that you weren’t aware of and decided that masonry was out. If you cared, you should have participated in the vote that you were not aware was happening. It’s too late to change it.” https://m.youtube.com/watch?v=yikbSQ6tvlE https://m.youtube.com/watch?v=yikbSQ6tvlE
- culi 10mo ago
  Wasn't Firefox the only browser that actually implemented `grid-template-rows: masonry` anyways? It sucks whenever browsers backtrack on a W3C standard that reached "Working Draft" status but it doesn't seem like it's gonna impact many people Besides, it's not being "deprecated". It will continue to work as it does. We just have a better alternative that the big 3 all agreed on.
- afavour 10mo ago
  Masonry was never “in”, no? Mozilla proposed it and were the only ones to implement it, behind a feature flag. Then WebKit proposed an alternative that was discussed at length: https://github.com/w3c/csswg-drafts/issues/10233 https://github.com/w3c/csswg-drafts/issues/10233
  - miiiiiike 10mo ago
    People have been dragging their feet on subgrid, masonry, etc for almost a decade. I followed it pretty closely for years but stopped when it started turning into a Christopher Guest mockumentary. Masonry or grid-lanes, who cares? I’m just glad masonry (the feature, Baseline 20XX) and subgrid (Baseline 2023) are finally here.
- JimDabell 10mo ago

brcmthrowaway 10mo ago

I don't understand all the busywork goes behind new browser updates, just to retain their market share (since they can afford more engineers, than say Ladybird). Is this needed? It's not rocket science, folks.

fragmede 10mo ago
Psh, rocket science only has to contend with physics, which generally doesn't change much, if at all. The equations used to get humans to the moon didn't change because someone discovered you can send a specially crafted packet and escape the sandbox and steal money from everybody on the Internet.
concinds 10mo ago
All these CSS upgrades have been meant to reduce the need for Javascript for all the things web devs do out there in the real world. It's a good thing. You should tune out more of the ambient cynicism because it's ignorant and unhinged. People who don't follow any standards discussions, don't talk to web devs, don't read anything except headlines and who are only imitating the attitudes of whatever cynical, depressed social media bubble they fell into.

nitwit005 10mo ago

How would you query the location where you need to load more data when scrolling down (the highest empty spot)?

jonah 10mo ago
You just append new <figure> elements to the <main> in the example and it will automatically put them in the appropriate column.
- nitwit005 10mo ago
  Your answer doesn't appear to relate to what I asked. You need to know when to query the backend for more data if it's an infinite scrolling setup.
  - jonah 10mo ago
    Aahh. The way you phrased your question was pretty ambiguous. The other posters have good answers. One thing to consider for a smooth interaction would be to eagerly load the next x elements before they scroll into view.
    - pcl 10mo ago
      Yeah I’d assume you’d eagerly load enough to make sure everything gets at least partially into the viewport, and maybe a fee more to optimize for network latency. And then perhaps track elements whose trailing ends are not in the viewport, and load more once those become fully visible?
tom1337 10mo ago
I guess you can just start loading a first batch, add an intersection observer to the last 3 elements (if you have 3 lanes) and then when one of those intersects you simply start fetching the next.
- notpushkin 10mo ago

culi 10mo ago

Props to the Safari team. They surprised us all when they suddenly shot to the top of interop-2025 this October https://wpt.fyi/interop-2025 https://wpt.fyi/interop-2025

ChadNauseam 10mo ago
I didn't realize it was tracked like this, but I have noticed that as of iOS 26, Safari has gotten a huge number of great web features. It has WebGPU of course, but many small things like fixing up missing parts of the OPFS API that make it actually usable now. Now they even have the field-sizing CSS property [0], fixing imo the most glaring ommission from CSS: the inability to make text input boxes grow to fit the input text! [0]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/field-sizing https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
- rendaw 10mo ago
  I thought that was supposed to be fixed by contenteditable plaintext-only. Why was field sizing still necessary?
  - hombre_fatal 10mo ago
    At least recreate their demo for us to showcase the fix. But I feel like it would be a let down that answers your question.
  - extra88 10mo ago
    `contenteditable` is an HTML attribute but it depends on JavaScript to do anything useful. This problem is one of layout, CSS's domain, so `field-sizing` solves it while leaving HTML form elements to do the actual job of taking input.
neo_doom 10mo ago
Fascinating tracker. So we started 2025 with nearly every browser under 80% and ending the year with every browser with >98% interop? That's a lot of amazing work done by a lot of teams. Incredible!

cod1r 10mo ago

sweeeeeeeeeeeet

uniq7 10mo ago

Maybe this will be an unpopular opinion, but I really dislike the lane layout, because it is not possible to efficiently take a glance at all elements in the list, one by one. If you try to go left-to-right, you will quickly realize that at the end of each "line" it is really difficult to know where the next line starts. It is easy to accidentally start again on the same line (and inspect the same elements), or skip one accidentally. Then navigating through the elements one by one requires a considerable amount of cognitive effort, your eyes bounce up and down constantly, and you end up inspecting the same elements multiple times. If you try to go top-to-bottom, lane by lane, you will then realize that the page also has infinite scroll and you will never go past the first lane.

Tempest1981 10mo ago
Feels very "right-brain". I'm a brain-hemisphere equality advocate. Good for sites like Pinterest. But also Home Assistant.
aidenn0 10mo ago
I think it's one of those things that looks good, but is annoying to use non-superficially.
- j_w 10mo ago
  IMO it's annoying to use at all. It just looks "good" (subjective). Larger images dominate and flashy images become more important to get attention (if bringing focus to an image is the idea). An extremely poor way to present information.
sippeangelo 10mo ago
Thankfully the feature is just in time for it to fall out of fashion! It really is an awful layout, UX wise. But at least it looks pretty at a glance!
ethmarks 10mo ago
But if you don't need to systematically examine every element one-by-one, lane layouts are pretty good. Sites like Pintrest use lane layouts because their content isn't meant to by systematically examined, but rather absorbed at a glance. If your content is meant to be systematically examined, using a lane layout would be a bad UX choice. But just because lane layouts can be misused doesn't mean they're a bad layout.

jbritton 10mo ago

I have often thought layouts should be done by a constraint solver. Then there could be libraries that help simplify specifying a layout, which feed constraints to the solver.

eurleif 10mo ago
Recently discussed on HN: https://news.ycombinator.com/item?id=46144039 https://news.ycombinator.com/item?id=46144039
hansvm 10mo ago
I've done that for desktop apps before. You have to be careful with the effects of sub-pixel rendering and whatnot if your math is continuous, but it's a viable path that I quite like.
- marcosdumay 10mo ago
  Don't use continuous math in either a design system nor a constraint solver that you expect random developers to use. Either case will only lead to problems.
  - hansvm 10mo ago
    I largely agree, but there's a little nuance insofar as "interior-point" methods are very powerful. You can go a long way by encoding your goals as error functions and letting a gradient-based optimizer do the rest.
jacobp100 10mo ago
iOS used to do this using the Cassowary constraint solver pre-SwiftUI. It’s the worst thing to work with. So much code turning on and off constraints, dynamically adding constraints when you have new views. And that’s before you get into conflicts

deleted 10mo ago

[deleted]

jeroenhd 10mo ago

I have to ask, like with all the other browser specific trial implementations: how is cross platform support? If we wanted to make a grid layout that only worked in one browser engine, grid-template-rows: masonry was there for a while now. Chromium still seems to be working on support it seems based on https://cr-status.appspot.com/feature/5149560434589696 https://cr-status.appspot.com/feature/5149560434589696 so maybe it'll be useful soon? That page indicates that they're still discussing certain parts of the spec.

qingcharles 10mo ago
It's been on-and-off in all three browsers behind flags etc, but it's been in a constant state of flux over the last three years. One of the most gnarly new CSS features to get right. Lots of great arguments about how to implement it.

emilbratt 10mo ago

I always thought that the masonry layout looked good but made it harder to get a good overview of the images.

Sharlin 10mo ago
The biggest problem is that it's good if your images are all landscape or all portrait, but not when mixed.
- SahAssar 10mo ago
  The whole point of a masonry layout is if you have different aspect ratios. Otherwise a masonry layout is just a normal grid.
  - Sharlin 10mo ago
    Masonry layout fixes one of the dimensions. That means either portrait or landscape images will look visibly smaller than those of the inverse aspect ratio, because their longer side must be the same length as the latter’s shorter side. Masonry works well if you have different aspect ratios of the same orientation.
    - powersnail 10mo ago
      Just curious, what algorithm is good for laying out images of arbitrary orientations, sizes, and aspect ratios? That seems like a pretty difficult problem. Some sort of variation of knapsack problem maybe?
      - emilbratt 10mo ago
        I dont know what would be the best way, but I personally want each image to be represented correctly in relation to all other image. This means that the way images are laid out will looked jagged. However, as a consequence of that, it is easy to find back to a specific image. Its like when you are coding, you look at the "shape" of the code when scrolling to find that specific function definition etc.. Here is an example of the layout of a photostream that I was satisfied with. https://frifoto.emilbratt.no/?view_mode=photo-stream&tag=Allvi https://frifoto.emilbratt.no/?view_mode=photo-stream&tag=All...

oefrha 10mo ago

I've been using Chromium's display: masonry in some internal apps since they introduced it behind a flag in Chromium 140. Looks like they just have to rename it now?

qingcharles 10mo ago
I have too. And the Safari version that was in the betas/tech previews. One of the biggest arguments over the last couple of years was what to call it. A lot, lot of ideas put forth as alternatives to "masonry" which wasn't thought to be great for non-English speakers. I'm glad they finally nailed a name for it! The other big argument was over how to activate it. Is it a grid? Is it a flexbox? Is it a brand new animal? Now I just need to figure out the best way to implement this semantically with a polyfill for the next 30 months until it's baseline.
- oefrha 10mo ago
  I actually started using Safari's `grid-template-rows: masonry` when it came out, but unfortunately Safari TP crashed a lot on me when using that for some reason. Chromium's never had a problem.

acjohnson55 10mo ago

Very cool! I wonder, will it be easy to build interactive interfaces on this primitive, like animations and drag-and-drop?

snooooooooooore 10mo ago

Is anyone working on actual css problems instead of this sugar syntax? Hypermedia suffers because these marketing companies waste time on making sure they can build Pinterest in 10 LoC instead of fixing actual long running hypermedia domains.

pcl 10mo ago
Moving this sort of stuff out of JavaScript and arcane hacks allows the browser rendering engines to optimize these common patterns. This is sorta the opposite of syntactic sugar. The syntactic sugar is the libraries that implemented these patterns without rendering support. Shall we call it syntactic umami perhaps? Or syntactic lipids?

ray_v 10mo ago

If I ever encounter, and need to read a webpage with arbitrarily sized and placed grids of text, please somebody just shoot me. https://webkit.org/wp-content/uploads/Grid-Lanes-newspaper-demo-dark.png https://webkit.org/wp-content/uploads/Grid-Lanes-newspaper-d...

arewethereyeta 10mo ago
what's your problem?
2cynykyl 10mo ago
Funny, I think that looks gorgeous!
jlaternman 10mo ago
I think this looks great too. Finally replicating the efficiency of newspaper layouts. No enforced symmetry, just content in an optimal space. I want.
- deleted 10mo ago
  [deleted]
- snackbroken 10mo ago
  It looks pretty, but fails at basic usability. After reading the top-left block of text titled "Optimizing Webkit & Safari for Spedometer 3.0", what the fuck am I supposed to read next? Am I meant to go recursively column by column, or try to scrutinize pixels to determine which of the blocks are further up than the others, skipping haphazardly left and right across the page? A visual aid: https://imgur.com/a/0wHMmBG https://imgur.com/a/0wHMmBG Columnar layout is FUNDAMENTALLY BROKEN on media that doesn't have two fixed-size axes. Web layouts leave one axis free to expand as far as necessary to fit the content, so there is no sane algorithm for laying out arbitrary content this way. Either you end up with items ordered confusingly, or you end up having to scroll up and down repeatedly across the whole damn page, which can be arbitrarily long. Either option is terrible. Don't even get me started on how poorly this interacts with "infinite scroll".

wackget 10mo ago

I wish they'd release CSS Gap Decorations: https://developer.chrome.com/blog/gap-decorations https://developer.chrome.com/blog/gap-decorations I'm tired of having to use stupid hacks to get nice-looking borders between flex/grid items.

rahkiin 10mo ago
Have you considered using tables? It is funny how we keep asking more and more and more even though we already have it so much better than before. Can we never be happy with what we have?
- selfmodruntime 10mo ago
  > It is funny how we keep asking more and more and more even though we already have it so much better than before. I've been developing web stuff for 15 years now and sometimes I can't believe comments like these. We didn't have it "so much better before". CSS sucked hard and getting things right for three devices was an incredible pain in the ass. Tables have semantic meaning. They don't support fractional units. Reflowing for mobile is impossible and you need JS hacks like splitting tables. You can't reorder natively.
  - spencerflem 10mo ago
    Tbf it said “we have it so much better Than before” I think they agree with you
  - alwillis 10mo ago
    I saw a similar comment on HN recently that CSS was "better" back in the day and what we have today is either unnecessary or too hard. I reminded that person we had to use floats and positioning hacks and abuse HTML tables for page layout before flexbox and CSS Grid were created. There was no way simple method to center a div!
  - perardi 10mo ago
    I have been developing web stuff for 20 years now and I also can’t believe comments like these. Flex and grid enable layouts that are far beyond anything we could do with table layouts. Anyone who claims otherwise has obviously not done any amount of serious, production FE UI design and development. Are there bits of DX ergonomics I’d like in flex and grid? Of course. Does the syntax sometimes feel a bit arcane? Yeah. But the raw power is there, and anyone who claims the contrary is either a gormless backend developer, or some troll who is trying to design things in MS Word.

GaryBluto 10mo ago

To quote the wise Karl Pilkington: "Do we need 'em?" HTML has become more and more bloated. How many methods do we need to do something that was possible back in the 90s?

willio58 10mo ago
While I like a Karl Pilkington quote as much as the next guy, I really do want this. I have one specific use case for this layout that's always felt a little bit painful to reach into js for. I can't wait for the day I can simplify that further into native CSS.
ezequiel-garzon 10mo ago
How was this masonry layout possible back in the 90s?
- GaryBluto 10mo ago
  Tables.
gherkinnn 10mo ago
There is no winning, is there? Half of HN wants browsers to revert to document readers and the other half wants HTML and CSS to do what JS can. A small minority then insists that we should get rid of HTML and CSS entirely and start from scratch. The louder the ideas the further away the person is from actually using the tech. I personally would not have the patience for community management. That said, CSS masonry looks solid.
alwillis 10mo ago
> HTML has become more and more bloated. How many methods do we need to do something that was possible back in the 90s? This is incorrect. Lots of old stuff was removed or deprecated from the HTML5 specification; elements like `s`, `u` were repurposed from being presentational to semantic: - acronym - applet - basefont - big - center - dir - font - frame - frameset - isindex - noframes - s - strike - tt - u - xmp - noembed - plaintext

ricksunny 10mo ago

I wonder how long it takes LLMs to correctly ingest fresh CSS notation like this.

todotask2 10mo ago

I think Apple should make Safari stable downloadable option for all platforms.

speedgoose 10mo ago
I’m old enough to have installed Safari on Windows XP. I’m not sure it has been enough years since this Apple failed product.
- kuekacang 10mo ago
  experiencing how text renders differently, slowly, with my potato battleship
jacobp100 10mo ago
This might actually happen indirectly. Kagi’s new browser uses WebKit. macOS only now, but eventually it’ll come to windows
- todotask2 10mo ago
  I have been using Kagi Orion on macOS and iPhone, so far so good.
alwillis 10mo ago
There are WebKit-based browsers for Linux: https://webkit.org/downloads/ https://webkit.org/downloads/

imbnwa 10mo ago

What’s the best resource for getting a handle on all modern CSS for someone who hasn’t paid attention since flex box

satvikpendem 10mo ago
I like Josh W Comeau's content, he has a lot of free articles, but his paid CSS course goes through step by step why CSS is the way that it is, worked great for me for understanding it all. My work paid for it though, that's why it's priced so high, but I'm sure he has discounts for individuals.
alwillis 10mo ago
This should be a good start: https://nerdy.dev/cascading-secret-sauce https://nerdy.dev/cascading-secret-sauce
perardi 10mo ago
There are a lot of resources. I am a fan of: https://www.youtube.com/@KevinPowell https://www.youtube.com/@KevinPowell Kevin is a no-nonsense no-hype educator. He will keep you up to date without a lot of engagement hacking.

nakedneuron 10mo ago

Is there anything to be said about accessibility? Found the word only once in the comments.

mattlondon 10mo ago
They mentioned tabbing and screen readers quite a few times. I found the "jumping" ordering quite concerning but further down in the article they mention "tolerance" that seems to be a way to allow the layout to be more consistent in terms of ordering.

interstice 10mo ago

Kinda odd they didn't call it masonry given it's already been called that forever. At least grid-lanes is reasonably self explanatory.

pbowyer 10mo ago
I'm pleased they rename it because grid-lanes opens up more than masonry layouts. I've been waiting to be able to have a fully responsive layout (where interleave sidebar content in with the page content on small screens, but have it in a sidebar on larger screens) without using any JavaScript, and this finally makes it possible. Demo: https://codepen.io/pbowyer/pen/raLBVaV https://codepen.io/pbowyer/pen/raLBVaV Previous comment: https://news.ycombinator.com/item?id=46228993 https://news.ycombinator.com/item?id=46228993
qingcharles 10mo ago
The naming was half the discussion on implementing this. There were a lot of people smarter and more knowledgeable than me that had a lot of opinions on the name that I hadn't thought about. I remember one of the reasons was that the word "masonry" wasn't as obvious a concept for non-English speakers.

nehalem 10mo ago

There is an element of tragic comedy to those announcement. While remarkable on their own, everybody knows that one cannot use any new browser feature reliably any time soon due to Apple not shipping continuous updates to the browsers they force upon their users.

hu3 10mo ago
iOS from 2 versions prior don't get latest Safari? I can't check because my wife's iPhone is, regrettably according to her, "updated to the latest glAss version".
- 8n4vidtmkvmk 10mo ago
  I know one of my clients complained something didnt work on their few year old iPad. So.. I don't know what the cutoff is but clearly not everything updates regularly. He did try updating it manually too but couldn't.
robertoandred 10mo ago
Safari got a big update last week.
- mrgoldenbrown 10mo ago
  Safari in general got an update, or Safari on only the devices Apple deems worthy? Usually Apple limits Safari updates to new phones.
  - robertoandred 10mo ago
    Do you consider six-year-old phones new? What about seven-year-old Macs?
    - culi 10mo ago
      I think the iPhone X is the newest model that is no longer receiving iOS updates. That came out in 2017. So 8 years ago

prakashn27 10mo ago

That makes sense. Safari is so smooth now in iOS. Moved from Firefox.

noitpmeder 10mo ago

Any ideas how I can track support for this in firefox?

herpdyderp 10mo ago
It seems that support tracking websites don't know what this is yet. MDN briefly notes it as an option for `display` but there is no other mention of it.

temporallobe 10mo ago

It’s always nice to see native implementations of functionality pioneered by third-party libraries. Bootstrap, for example, has made this kind layout (somewhat) possible but there is also a Masonry plugin that simplifies it.

ericarogulski 10mo ago

[dead]