18 ms·

Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

591 points by achairapart 2y ago

sieabahlpark 2y ago
[dead]
iteratethis 2y ago
I think it's really weird that this is considered. Masonry is a very specific layout implementation whilst the typical CSS layout feature is more foundational. Also, I think the need for masonry is vastly overestimated or perhaps not fully researched. It is presented/implied to be a common need but it isn't. Check the top 100 websites, check your personal top 20 websites, how many use masonry? I bet not that many, it's niche use case which also has plenty of usable alternatives. It also never even shows up in any developer surveys. Anyway, if we're into the game of building very specific layout solutions into CSS itself now, I'd argue the layout as seen on Google Image search is the far more useful one. It is somewhat of a horizontal masonry, but not really. Each image must keep its original aspect ratio (no cropping) whilst all images on the same row have the same height, thus filling the vertical space of the row fully. At the same time, rows must be roughly of the same height. There can be no gaps at the end of a row nor at the last row. Quite hard to implement, although there's articles describing how.
ivanjermakov 2y ago
def. grid: a network of lines that cross each other to form a series of squares or rectangles. Masonry layout doesn't form a grid, but multiple columns with a variable item height. I feel like this should not be a part of CSS spec, and absolutely not a part of CSS Grid.
- niutech 2y ago
  Yes, masonry has been already solved using CSS Multi-Column Layout: https://w3bits.com/css-masonry/ https://w3bits.com/css-masonry/
pimterry 2y ago
A really nice feature here is that if you view the demos in a browser that doesn't support this (i.e. all current stable browser releases without special flags enabled) because they're building directly on grid layouts, they still appear in a pretty reasonable fixed-row format: https://webkit.org/demos/grid3/ https://webkit.org/demos/grid3/. In each case it'd look much nicer with a proper masonry layout but it's still very usable otherwise (and of course you could feature detect to provide a better fallback if you're not happy with that anyway).
mg 2y ago
If one wants to do a "Masonry" layout, what's wrong with calculating it via JavaScript?
- xrisk 2y ago
  I’d rather have browser vendors responsible for a correct implementation. This seems like a rather nuanced feature.
  - jampekka 2y ago
    With browser vendors you have to get them to do the same implementation. With JS/WASM it'll work across browsers given the more fundamental APIs work the same.
- tambourine_man 2y ago
  It’s less smooth, uses more power, requires more bandwidth, etc.
- nolok 2y ago
  You're asking "why render it correctly when we can render it wrong and then fix it afterwards".
  - datascienced 2y ago
    An argument I would take more seriously if infinite scrolling was not a requirement too.
- isodev 2y ago
  Because why introduce a custom abstraction to implement something with an imperative scripting language when you can achieve the same result with a declarative language built specifically to address this use case? You'd rather maintain all the maths and JS dependencies for this than have browsers just render what you want?
  - pavlov 2y ago
m3h 2y ago
I am wondering whether it makes sense to keep adding more "layout" options to CSS, given that we have the legacy floats and then the modern flexbox and grid layout. If there are still cases that are not covered, perhaps a better solution to to have one final constraints-based system that covers all layout cases, even if it comes at the cost of complexity. The CSS frameworks and utility libraries will then be built on top of it to provide the next generation of "masonry" grid, etc.
- seumars 2y ago
  The whole point of this initiative is to stop using out of date float-hacks, or soon-to-be out of date hacks to CSS grid or flexbox. Firefox's masonry layout is in fact implemented in such a way that basically covers all layout cases by simply adding a new attribute that collapses grid rows.
  - m3h 2y ago
    >Firefox's masonry layout is in fact implemented in such a way that basically covers all layout cases That's good to know.
    - deleted 2y ago
      [deleted]
  - deleted 2y ago
    [deleted]
  - Terretta 2y ago
    > Firefox masonry... by simply adding a new attribute that collapses grid rows Not just Firefox, the proposal here is grid-template-rows: off;
- zarzavat 2y ago
  JavaScript is the final layout system. No declarative language can ever handle every use case. Fortunately I rarely need to resort to JS since grid came out. I’m not sure a constraint based system would do much good as it would sit awkwardly in the middle of grid and JS.
pimterry 2y ago
For more background, and some detailed discussion of the opposite argument ("display: masonry" over "display:grid"+"grid-template-rows: masonry") see https://github.com/w3c/csswg-drafts/issues/9041 https://github.com/w3c/csswg-drafts/issues/9041
rezonant 2y ago
Oh yes please. Masonry is definitely the missing piece right now. And I run into cases where designers give it to me pretty regularly-- I don't want to crush their dreams but without a JS-free masonry solution, the dreams are getting crushed. OK, having read a lot more, here's my thoughts. I love the possibilities that can be raised here when masonry is built into grid, but you can target specific rows and columns for specific elements in grid. This is a useful thing for some layouts, but when the rows are truly non-existent (unlike the related auto fill/fit stuff we've had until this point) I feel like the abstraction begins breaking down. As much as I love that we have Apple pushing to get this done, I do think it is probably better to go with a net new masonry display type :-/
- mickael-kerjean 2y ago
  100% for masonry as well, couldn't care less about the approach as long as the selected one doesn't see the same fate as websql and it becomes a viable solution in a reasonable amount of time.
  - rezonant 2y ago
    Yes that's where I'm torn. I love seeing vendor interest either way. But grid is already extremely complicated, and so easy to get wrong it's a meme at this point. Creating even more confusion about how it's fundamentals work feels like the wrong path :-/
chrismorgan 2y ago
I strongly dislike the megamenu demo <https://webkit.org/demos/grid3/megamenu/ https://webkit.org/demos/grid3/megamenu/>, and feel masonry is completely inappropriate there. It makes a complete mess of flow direction, badly breaking expectations. The reading order you’d expect: https://temp.chrismorgan.info/2024-04-23-masonry-megamenu-2.png https://temp.chrismorgan.info/2024-04-23-masonry-megamenu-2..... What the demo actually gives you: https://temp.chrismorgan.info/2024-04-23-masonry-megamenu-1.png https://temp.chrismorgan.info/2024-04-23-masonry-megamenu-1..... This affects correct reading order and tab indexes. Basically, sighted users will always read things in the “wrong” order. This just drives home that there is no structure, it’s just an unstructured bag of links. Except… actually if you go through them in numbered order, it looks like there was some fairly logical ordering. It’s just been utterly demolished by inappropriate masonisation. (I’ve turned on “number items” in those screenshots. Normally, it’d look more like normal columns with no backgrounds.) The way it should be implemented is with columns, but adding `break-inside: avoid` on each section, which their demo has missed. The newspaper demo is also a little dubious for similar reasons, but it’s a much smaller deal. Now images and such media which are in more independent blocks and where reading order isn’t such an ingrained thing, masonry layout does work better there. There are still patches where things can be a bit iffy, mostly around tab indexing, but it’s not obviously wrong any more.
- niutech 2y ago
  Why not just use widely supported CSS Multi-Column Layout for masonry effect?
- rezonant 2y ago
  So you're saying the a11y tree and tab ordering is bypassing the actual ordering of content and instead traversing the columns one by one? I'd call that a bug. In a masonry layout the expectation of a sighted user is that there is no continuity from column to column, but instead through the visual line. And the "unexpected" (disagree) ordering you show does that. I think the issue would be that tab ordering is ignoring the raw ordering of the content and instead trying to emulate something visual, almost certainly some kind of hold over of the implementation as it currently exists.
mattbessey 2y ago
> This layout creates uniformly-sized columns, without any rows I find it amusing that they've decided to refer to this as masonry layout. If you actually built a wall like this (as opposed to uniformly-sized rows, without any columns) it would be a structural engineering disaster.
- deleted 2y ago
  [deleted]
- cfj 2y ago
  Probably influenced by the most popular JavaScript library for achieving this type of layout, Masonry[0]. The author notes at the end of the article: > But do expect the name of this value to change in the future. And perhaps prepare for a future where we call this “columnar grid” or “Grid Level 3” instead of “Masonry”. [0] https://masonry.desandro.com/ https://masonry.desandro.com/
  - joenot443 2y ago
    I expect this is the case, if I had to describe that layout in iOS-land I'd also call it "masonry". It's a pretty common descriptor in the Wordpress world - grids/scrapbooks will often have masonry as one of their layout styles. Maybe 100 years from now when people are browsing in their neurodisplay they'll be able to think "masonry" and have their photos tile the way they like, never having heard of Javascript or CSS in their lives. Language is neat like that.
- rezonant 2y ago
  But masons build floors like this all the time, and it is not an engineering disaster. That's the metaphor. The reason you think it would be a disaster is the load of gravity against it, a concept they have not yet introduced into CSS, thankfully.
- 627467 2y ago
  "masonry layout" is a term used for at least a decade[0] Pinterest is probably the most famous implementer of this layout [0] https://www.sitepoint.com/understanding-masonry-layout/ https://www.sitepoint.com/understanding-masonry-layout/
pavlov 2y ago
If the designers of Unix had seen the light of CSS, they wouldn’t have bothered with shells and file descriptors and C and Awk and all that composable flotsam. They’d just created a single program, call it the “Central Software System”, and defined thousands of properties that let you control its state machine to produce the output you need. Presto! The perfect computer. If for some reason someone needs a new kind of output, it can be added to the Central Software System via a friendly decade-long committee process. And if the properties happen to conflict in how they define some output, well, the one company in the world who has actually implemented all of this “open standard” can decide what happens in that case.
- sebstefan 2y ago
  You can say that about almost any abstraction layer
  - gwervc 2y ago
    The WPF has easy to use grids and layouts, a sane default styling yet is very to completely overhaul. CSS is a failure by design.
    - sebstefan 2y ago
      Yes, but that's a completely different point
- smokel 2y ago
  They would probably also use regular expressions and incomprehensible $ and \ escape codes to retain some of the fun.
- datascienced 2y ago
  Is this a sysvinit vs systemd rant?
  - HeckFeck 2y ago
    $ /etc/init.d/initwar start Starting initwar (via systemd) Sad sysadmin noises
pquki4 2y ago
I thought this kind of waterfall layout was cool and trendy a few years ago, but these days very few websites are doing it?
- rezonant 2y ago
  A big reason is because it's not possible on the web, and it's worth noting that the kind of visual you see in masonry demos is the most extreme example of what you could do with it. Most of the time it's: I want to fill a page with modules of differing heights where positionality is based on importance not coordinate, without weird gaps where items fall into the same row and constrain each other.
- nkozyra 2y ago
  For awhile it was just described as "Pinterest style." It has some use cases but for the most part it's literally a wall of unstructed information. Difficult to parse and build any mental hierarchy. It's also ... incredibly easy to do with existing css.
  - iainmerrick 2y ago
    I would hope we're getting over trying to make other websites look and behave more like Pinterest. Pinterest exemplifies the worst of the web in several ways.
  - thousand_nights 2y ago
    > incredibly easy to do with existing css care to demonstrate? given a dynamic collection of images where you don't know the aspect ratios beforehand
    - niutech 2y ago
      Here is the demo: https://w3bits.com/css-masonry/ https://w3bits.com/css-masonry/
    - crote 2y ago
      Does it actually solve that problem, though? In the photo demo all content is either 1-column or 2-column wide - and that already results in some very noticeable gaps. I don't get the impression that it can properly handle arbitrary aspect ratios. You're pretty much forced to stick to a single column width and fit all images to match, so not exactly an improvement over what we already have right now.
lovegrenoble 2y ago
I always preferred to use Flexbox on almost everything; it's suitable for most situations. Also, for anyone struggling with flexbox - I use this tool to streamline the process: https://flexboxcss.com https://flexboxcss.com
ThatMedicIsASpy 2y ago
I already use this. On Firefox I just enable it in the options and make use of it for my bookmarks. On Mobile this isn't an issue since it's just stacked on top of each other (no about:config on mobile). The last image has it turned off. https://imgur.com/a/o7OyZEW https://imgur.com/a/o7OyZEW
- jamincan 2y ago
  From what I can tell, the rules of masonry layout result in irregular sorting since, from what I can understand, it fills by row the highest available slot first, but the result visually appears as though it's sorted in columns. So if you resize your window, the order of your bookmarks would change.
- somishere 2y ago
  Try Firefox beta on mobile :)
codingclaws 2y ago
I built a masonry layout with only CSS and HTML 10 years ago. The site is actually still live. A scripting language is used to generate the HTML and CSS based on the dimensions of the images. But the masonry runs left to right not top to bottom.
- thejohnconway 2y ago
  How does that differ from just setting the images to be inline-blocks? Was it justified?
  - codingclaws 2y ago
    It's centered basically. All rows span the same width, but the heights of the rows can differ.
- The_Colonel 2y ago
  That's not going to be responsive which is today a must have.
  - codingclaws 2y ago
    It is actually responsive, I think because I used percentages in the CSS.
    - The_Colonel 2y ago
      So it makes pictures larger / smaller based on the screen width? Usually what is expected is that with narrower screen, you get fewer columns, pictures are still same-ish size. You also need to keep the order of the items (e.g. on a wider screen 1, 2, 3, 4 are all on one row, with a smaller screen 1 and 2 are on a row, then 3 and 4 on another row).
      - CodeWriter23 2y ago
        So no different than current design paradigms (which I loathe btw) which give you the exact same content regardless of viewport size.
KwanEsq 2y ago
Nice to see this getting some push and attention. I still remember seeing Mats Palmgren (seemingly?) single-handedly proposing/speccing and implementing this in Firefox a few years ago. Glad it hasn't just died because it was a Mozilla proposal/experiment (with proper experimental stage), instead of something Google just dumps on the web fait accompli.
slimebot80 2y ago
Is there any examples of server-side rendering that pre-determines a masonary layout for the content? Like: Given these images, and this window size, here's a calculated layout to make them all look nice... I figure this would be more performant than any type of JS polyfill
- echoangle 2y ago
  How would this work when loading the page the first time? Would you check the window size and reload once just to get the first layout? And would you reload the page every time the window is resized?
phkahler 2y ago
Umm. Can't you just make each column a subgrid within a larger grid that has one row? It seems like either these constructs are poorly designed, or people don't see how to use them to get what they want.
- PullJosh 2y ago
  As I understand it, the hard part of a masonry layout is ensuring that items are laid out with the first items near the top of the screen and the last items near the bottom of the screen. If you just plop your items into columns, the first items will all appear in the first column and the last items will all appear in the last column (left to right), which is not the behavior you want. To my knowledge, the correct behavior cannot currently be created in CSS alone. (Or if it can, it must be a wild hack.)
  - phkahler 2y ago
    If people want to choose where things land they can do that. Therefore I assume we're talking about a scenario where the items are not known in advance - i.e. they come from a database query or similar. Is there no way to SELECT every Nth item when doing a query? Return a count and select where count MOD N = k? Dump those in a column. This feels like "I want my layout algorithm to be part of the standard." and if you don't think so, see the part where they also want the equivalent of "colspan = 2" for some itmes - possibly with another pattern to define which ones.
    - micromacrofoot 2y ago
      > "I want my layout algorithm to be part of the standard." I mean, yes... it's a very common layout algorithm so it gets standardized
    - threeseed 2y ago
      But what if you resize the browser or turn the screen on your iPad. Would you really want that to trigger an entirely new set of SQL statements ?
achairapart 2y ago
So, the background story is that CSSWG DevRels from browser vendors are debating how to formally include the Masonry layout into CSS, at least since 2020, when Firefox first proposed it. The news here is that people at WebKit decided to push the debate to the public, inviting designers and developers to take some action (“post to social media, write blog posts”), in order to get past this. While it may look just like a formality, I think this will make an important precedent. The real underling debate here is either to treat every layout option as a part of the CSS Grid, or keeping adding new CSS Display proprieties as necessary. The first option will make even more complex the (already convulsed, IMHO) CSS Grid specs, the latter will bloat the CSS specs with a load of new proprieties (and related sub-proprieties). Either way, it's not as easy as it looks.
- pier25 2y ago
  I don't know about the implementation but it makes zero sense that masonry should be part of grid. It's not a grid!
- eternityforest 2y ago
  I've yet to ever find a use case for grid.... I'd prefer this be a flex box feature so I can continue ignoring grid. But it seems like they have good reasons for including it, so I suppose I'll have to actually practice with grid more!
- niutech 2y ago
  Masonry is easy and has already been solved using CSS Multiple Columns: .masonry { column-count: 6; column-gap: 10px; }
- mvonballmo 2y ago
  A "row-less" grid fits very well in the current CSS Grid specification, in that it can reuse the very powerful column-definition property as well as sub-grids. Their examples very convincingly show how orthogonal these features are. Mostly, you just write grid-row-template: masonry and everything else just works with it. This is nice. It doesn't become harder to use the grid layout than it already is IMHO. The drawback is mostly for browser-engine authors, for whom the bar for "fully supports CSS Grid" will be set even higher. They also mention that it might avoid "performance traps" where an implementation that needs to support all features of grid might be slower at some parts of grid layout than it would be if the specification were simpler. If there were a separate display mode, then you'd have to repeat the grid-column specification for the masonry layout, which seems a shame.
tomp 2y ago
This is readily achievable today with `columns`: https://primozic.org/aesthetics-art https://primozic.org/aesthetics-art
- sn0wleppard 2y ago
  That example doesn't achieve the second objective of the proposal, "It distributes content across the page (instead of flowing down each column, one by one)."
emadda 2y ago
Related: I created an interactive demo of grid principles here: https://cssprinciples.com/3/grid/ https://cssprinciples.com/3/grid/
- victor106 2y ago
  this is very educational and useful
  - emadda 2y ago
    Thanks Victor, it means a lot :)
6510 2y ago
My proposal would be to put the image dimensions in the name of the image file. example-400x200.jpg Without that I cant think of an "easy" to implement formula to keep each column the same length. If given a group of numbers, how would one divide them into 8 groups the same size? Extra fun: You may increase each number by n in order to make each group exactly the same size. n must be as small as possible.
paulhilbert 2y ago
"Others are questioning whether or not this kind of layout is needed on the web at all — they aren’t sure that well-known websites will use it." Would it instead be possible to exclude anyone with that attitude from a discussion about an open standard? I know this sounds toxic, but I would argue that approaching public design this way is ultimately more toxic wrt the outcome and those affected by it. Or maybe I misunderstood that part since everyone seems to not be bothered by it at all here...
- deleted 2y ago
  [deleted]
- rolha-capoeira 2y ago
  And honestly, that's a ridiculous claim. Two very popular websites I can think of right away are Pinterest and VSCO. (Perhaps VSCO on the web isn't as popular as the mobile app, but the company continues to use masonry as the design evolves.)
  - grub5000 2y ago
    Lots of sites that return a ton of images, like an of the image search sites (Google, Bing, DuckDuckGO, loads of porn sites etc.)
- gwbas1c 2y ago
  > Would it instead be possible to exclude anyone with that attitude from a discussion about an open standard? That attitude is rather critical and important to the discussion. I don't think it's the browser, or the standards bodies, responsibility to have built-in support for every possible feature we can imagine. Instead, the standards need to be simple and extensible so that that libraries (Javascript or WASM) can do creative layouts. (IE, instead of waiting for Masonry layout in CSS, you should be able to grab a Masonry layout library and include it with your web site.) Otherwise, we're building a system where the standards (CSS in this case) are so complicated that it's getting harder and harder to implement the standards; and are too inflexible to support what tomorrows' developers can imagine.
- 2y ago
t_mann 2y ago
I really like the general look and feel of masonry/waterfall layout, maybe it's because I grew up reading physical newspapers (and still do), but to me a columnar layout is just an intuitive way to divide up a page. I just wish there was an alternative to the default masonry ordering, which afaik is a simple rule that goes sth like 'place the next item in whichever column it can go up highest'. This means that the left-to-right order is really juggled from the second row onwards. What I imagine would be really nice is if there was a layout that preserves more of the left-to-right (or right-to-left, if that's your preferred direction) reading flow. Something like 'put the next item one column to the right of the previous item (or in the leftmost, if you were at the rightmost), unless you can put a second item in the same column without the new bottom going too far below the bottom border of the column to its left'. This would be more flexible than strictly going left-to-right (which would also mess up alignment) and would reatin some meaning of the left-to-right reading direction. I know it won't be possible to accommodate every possible formula one could prefer for masonry, but if you have content where the ordering matters at least a bit (maybe not for Pinterest, but for a journal eg it would), then I really think sth like this would be a more sensible default than the classic masonry rule.
- iainmerrick 2y ago
  It's the left-to-right ordering that's the problem. I'm fairly sure there's no way to order things left-to-right in this layout without inevitably having to skip around haphazardly. In a magazine-style layout, wouldn't you read the columns top-to-bottom first, then left-to-right? You can accomplish that already in CSS with either 'columns' or vertical flexbox. Another issue with this 'masonry' layout is the ragged edge at the bottom. In a magazine that would presumably be justified -- again something you can do with columns or flex. On the web, I guess there's a hidden assumption that you'll have endless scrolling content, so it doesn't matter what the bottom of the page looks like? If so, that's not necessarily something that should be encouraged.
  - vidarh 2y ago
    The main use for this will presumably be infinite scroll where columns doesn't work because it'd break all expectations when scrolling.
fmy105 2y ago
[flagged]
- presentation 2y ago
  Why would breakpoints be an issue? They’d just work the same as any other CSS feature wrapped in a media query.
Unai 2y ago
I really don't like how disingenuous, propagandistic and patronising Simmons is being in this article. Ending each section saying "all this will be impossible if not done the way I like", which is absolutely not true. There's not one reason why anything that can be done in "display: grid" couldn't be done with "display: masonry". But I think, and I hope, that people aren't the fools she's taking us for, and can see how absurd her proposition is. You could basically clone the grid specification, if you want all those features, and that way both can be developed with what works for each. She says doing that means new grid features might take more time to come to masonry. Really? More time than having to deal with new grid features that won't work at all with your version of masonry integrated in grid? You're still having to deal with two layout systems, even if you want to disguise one of them. Except doing it your way you can't select which system gets the features that work with it. At the end, instead of two layout systems with two complete sets of features, we'll have one single layout system with a bunch of features that sometimes work and sometimes doesn't, depending on a particular value of a particular declaration that you'll have to know about. And that's why people hate CSS. Seems lazy and an absolute mess to maintain. And it doesn't make sense at an intuitive level, since masonry works similarly to flexbox, not grid; and it doesn't make sense at a logical level either, since a masonry layout is not a grid. But I guess this is what we'll end up getting, since apparently anything Jen says goes. Like the ridiculous idea of doing "CSS4", which means nothing, does nothing and is nothing, but we're going with it for some reason anyway.
- SigmundurM 2y ago
  I wonder, what theoretical features could we have for a modular grid that'd be fundamentally incompatible with a columnar grid, and vice versa? If adding columnar grids to CSS Grids doesn't make any features impossible, then I don't see why we shouldn't just have one CSS Grid standard, and thus always ensure feature parity between modular and columnar grids. The argument being portrayed by Simmons, as I understand it, is that every feature that currently works for CSS Grid's modular grids, would also work for a columnar grid.
- troupo 2y ago
  > I really don't like how disingenuous, propagandistic and patronising Simmons is being in this article. Ending each section saying "all this will be impossible if not done the way I like" This is a very uncharitable way of reading this, and that's a polite way of describing this view. She shows what is possible, and how existing grid mechanisms can be leveraged for masonry layout. It's implicit that coming up with a proposal outside the grid would need to accommodate the same capabilities somehow. How is it patronising or disingenuous? They (and Firefox) literally implemented this and are showing what is possible. And are asking you for input. If you think you're incorrect, you can join and show them the error of their ways: --- start quote --- Our hope is that web designers and developers chime in (post to social media, write blog posts) with your thoughts about which direction CSS should take. Some people, including those of us at Apple, like having “Masonry” be part of CSS Grid. We believe this functionality is a mechanism to expand CSS Grid — allowing it to finally create columnar grids as well as modular grids. And we want this functionality to be mixed with all the other features of Grid, including the powerful options for defining a columns, track spanning, explicit placement, and subgrid. Other people instead believe Masonry should be its own separate display type. At first glance, defining Masonry with a new display type might make a lot of sense. You do get a tidy separation between layout types. --- end quote ---
egypturnash 2y ago
I feel like I spent this whole proposal waiting for "grid-template-columns:masonry" to be discussed.
nofunsir 2y ago
No thank you. I just want all the whitespace to take a hike. I certainly don't need this layout if webdevs are just going to put all the content on the center 1/3 to 1/4 of my screen.
hwbunny 2y ago
Webkit team snorting cocaine? look at this, how intuitive, how readable: grid-template-columns: 14ch repeat(auto-fill, minmax(28ch, 1fr)) 14ch; just throw the whole grid thing out of the window and get on board someone who can create syntax that wouldn't send you to jump off a cliff and feels like it was made by a fellow human being, not an AI controlled robot.
- hombre_fatal 2y ago
  Well, at least show us your ideal replacement for that logic that's more intuitive. Until then, these complaints usually cash out into unfamiliarity + assuming it's very hard to understand if you were you trying to understand it. Declarative UI is a very hard problem, so it's not always going to be `text-decoration: underline`.
  - hwbunny 2y ago
    [flagged]
  - risenshinetech 2y ago
    Many things are hard problems, but you don't need to be an expert to recognize an obviously bad solution. If you had showed someone the first bicycle, and it came with 3 differently sized wheels and a spike for a seat, you wouldn't have to provide an "ideal replacement" to know that it was a bad design.
    - JamesSwift 2y ago
      Which part of this is the spike for a seat? > grid-template-columns: 14ch repeat(auto-fill, minmax(28ch, 1fr)) 14ch;
Onavo 2y ago
Can you add drag and drop to this? Currently you need libraries like https://gridstackjs.com/ https://gridstackjs.com/, especially for nested cases.
turboat 2y ago
Suppose we could create a backwards-incompatible system to replace CSS. How would we do it? Are there any books or papers on how to create a coherent layout system? What about alternatives like Qt, Tk, SwiftUI, etc.? I've never used anything besides CSS. Are any of the actually-implemented systems in the wild better? If so, what makes them better? I want a system that provides a better interface for developers, but how? If we could start over, what are the design principles?
- eyelidlessness 2y ago
  One thing to be cautious about when selecting prior art for reference is that CSS sets a high bar for declarative control. I can’t speak to any you mention in detail, but my sense is that more comparable prior art would likely be found in print use cases.
- pphysch 2y ago
  CSS is overall pretty great and I've seen at least a couple non-web GUIs rip out their bespoke GUI systems and replace them with CSS or something very much like it. I think the big change will be better support for hierarchical definitions, including but not limited to nesting. TFA discussion would be pretty moot if there were namespaced properties that could somehow fit under display: masonry; rather than polluting the global namespace.
  - turboat 2y ago
    I have to assume that's partly because of the availability of implementations, tooling, and developer familiarity. Many platforms will let you toss in a web view, and if you want to set up e.g. a configuration screen with text and toggles, HTML/CSS will get the job done, more easily than maintaining a custom system that's peripheral to the core purpose of your app. I don't want to be overly negative, but I just can't view CSS as "pretty great." I appreciate the inherent difficulty of using 1-dimensional static text to specify a 2-dimensional dynamic layout. Still, basically every programming problem involves defining abstractions over some domain concept and expressing that in the syntax of your programming language. Somehow that's harder in CSS than any other language I've used. Within web dev I find both HTML and JS much easier to work with, despite their imperfections.
SassyBird 2y ago
Reposting as a top comment for more visibility: I have a website with my photos, which doesn’t use any JS for layout. When I was making it, I considered using JS masonry libraries, but I wasn’t satisfied with the results. Proper masonry layouts which fill all available space in practice actually crop some images. Leaving space around photos is required when you don’t want cropping and want to preserve aspect ratio. The only way not to do that is to have infinite scroll, which I guess is what corporate addiction machines want, but that’s not what I want on my own website. Here is what I did: https://yakubin.com/photography/albumless/ https://yakubin.com/photography/albumless/ https://yakubin.com/photography/album/kenya-2023/ https://yakubin.com/photography/album/kenya-2023/ I used display:inline-block to achieve this result, effectively treating photos as text that needs to reflow into new lines. I’m very satisfied with the result and prefer it over what the masonry libraries do.
- datagram 2y ago
  Flexbox was designed for these kinds of layouts, so that would also be an option here.
- qingcharles 2y ago
  I don't use JS for masonry layout. I have a fallback from the current masonry CSS solution to a supported CSS solution. The problem is ordering. The current CSS-only solutions work fine as long as the order is not important. (though you will still end up with weirdness at the bottoms of the columns IIRC)
- FireInsight 2y ago
  You could probably have done this layout in a couple lines of CSS with a row-oriented flexbox that wraps and is center-aligned. That would be the more standard way to do it too.
specialist 2y ago
Neat. I like it. Out of curiousity, why don't browsers have pluggable layout managers? Like Java's AWT/Swing LayoutManager. [1] Fussing with CSS and Java's stock layout managers (gridbag, table) always fills me with frustration and anxiety. In my experience, for the fussy work, it's easier to explicitly code what I want. Ages ago, inspired by Designing Visual Interfaces [2], I made a layout manager [3] for canonical design grids [4]. It was pretty neat. Fluent API. Always visually correct. All the baselines aligned just so. Predictable results. Perfect for banging out CRUD forms. [5] 1/ https://docs.oracle.com/en/java/javase/21/docs/api/java.desktop/java/awt/LayoutManager.html https://docs.oracle.com/en/java/javase/21/docs/api/java.desk... 2/ https://www.amazon.com/Designing-Visual-Interfaces-Communication-Techniques/dp/0133033899 https://www.amazon.com/Designing-Visual-Interfaces-Communica... 3/ https://web.archive.org/web/20110302212909/http://java.net/projects/designgridlayout/pages/Home https://web.archive.org/web/20110302212909/http://java.net/p... 4/ https://web.archive.org/web/20110308034949/http://designgridlayout.java.net/grids.html https://web.archive.org/web/20110308034949/http://designgrid... 5/ https://web.archive.org/web/20110515182322/http://wiki.java.net/twiki/bin/view/Javadesktop/DesignGridLayoutExample?TWIKISID=e1a6667476691b56753dc9b0744828c6 https://web.archive.org/web/20110515182322/http://wiki.java....
aidog 2y ago
I absolutely want this. I have wanted this for years. This is a form of grid so it should be in CSS grid. Especially since it has tracks. Browser makers, please just ship this.
account42 2y ago
I absolutely hate this kind of layout, especially when combined with infinite scrolling. Makes it impossible to systematically go over all items.
- amadeuspagel 2y ago
  It's not meant for things that you want to systematically go over, it's meant for things that you want to explore.
  - layer8 2y ago
    Some people want to go systematically over the items when exploring. I certainly tend to operate that way, and it’s infuriating when the UI is making it difficult for no good reason.
    - yau8edq12i 2y ago
      I guess in that case you can just browse other websites. No website can pander to everyone.
      - yashap 2y ago
        Not sure why you’re being downvoted, it’s true. If you want to display items (normally images) with different dimensions, while respecting their natural height/width ratios, you really have 2 options: 1) Fixed height rows: lower information density (excess white space around some of the items), but easier to scan systematically 2) Masonry layout: higher information density (no excess white space around items), but harder to scan systematically Nobody is “right” here, it’s simply user-by-user preferences about what you prefer.
        account42 2y ago
        It doesn't even make efficient use of space because the size of items depends on their aspect ratio. Fixed size cells is a much more sensible approach.
thebeardisred 2y ago
If this leads to more "forever" scrolling pages where I can never get to the footer I'll lose my goddamn mind.
spintin 2y ago
You can very simply do this with javascript. Browser developers are now reaching for straws to remain employable. That said the biggest tasks remains: - Go back to HTTP/1.1 with "One time password" auth.: https://datatracker.ietf.org/doc/html/rfc2289 https://datatracker.ietf.org/doc/html/rfc2289 - Simplify the browser so that it can be compiled in less than many hours on the latest CPU. - Completely remove the tie-ins to any commercial/governmental entities. Basically go back to Netscape with some improvements to javascript performance and hardware accelerated rendering of HTML. Everything else invented in the last 20 years is meaningless. This is valid in most domains: Raspberry Pi is the only real exception.
paradox460 2y ago
It feels good to see the webkit team actually doing good, publicly visible work again When I was cutting my teeth in web design, the early webkit blog and safari releases were always inspirational. The rate at which they pushed out new features in the mid 00s was astonishing
- qingcharles 2y ago
  They've definitely brought in some new people. AFAICT the reason Safari even has Masonry support is because they brought in the (very talented) guy that wrote the CSS spec for it.
cnotv 2y ago
I evaluate the CSS updates based on the gap in masonry layout achievement. It's one of the most important layouts that have existed for more than a decade and should have been the only achievement after flexbox and grid. If you have a bunch of media, unless you have a narrow container like FB/IG, that's the only way to go. The alternative is fixed ratios. Anyone who has been working in FE knows it.
roblh 2y ago
I found a really cool way to do this with svelte and css grid a few months ago, based on a blog post I can't seem to find now. A full masonry layout too, not just columns, but each element can have dynamic height and width. The thing that made it click for me was that you don't have to make the grid rows and grid columns 1:1 with the full width/height of each element. Making 10px or 20px rows and columns and then using a svelte component for each image that chose a number of columns and rows based on the image aspect ratio. I'll see if I can make the repo public today. Edit: reading further, I think my approach was basically the same as theirs near the end of the post!
- qingcharles 2y ago
  You can make something very close, but you can't order the items the same as you can with the new property (so if the order is important this might be a dealbreaker), and IIRC you end up with less attractive, more-jaggy bottoms to the columns.
fzeindl 2y ago
I never understood why CSS would not just adopt Apple's Autolayout and be done with it: I want to specify that this space should be equal to that space, these borders to grow, and those borders to shrink and this point always aligned to that point. It is simple, intuitive, it works for all cases. Instead we are inventing, what, the fifth generation of CSS-layouting now? Does nobody think this is odd?
- pornel 2y ago
  > it works for all cases It's only a fixed 2d arrangement. It isn't any more expressive than the CSS table layout or position absolute+relative combos. It has no ability to react to size constraints in any other way than naive stretching and hitting min-width hard. It can't do anything "responsive" like wrapping items to the next line, or switching a grid from 1x6 to 2x3. You can't make masonry in autolayout constraints, other than precomputing specific constraints for every item, which won't automatically reflow the items to a new container width.
- layer8 2y ago
  It’s difficult to unambiguously and usefully specify what should happen when not all constraint can be fulfilled. And you can likely also DOS browsers by exponentially exploding constraint calculations. CSS is bad as a layout system, but I also don’t like constrained-based layout systems unless they enforce that the constraints can always be fulfilled and be calculated in reasonable time. Which implies that you wouldn’t be able to change the layout willy-nilly client-side with JavaScript.
  - fzeindl 2y ago
    Checking that the layout isn‘t exponentially complex and DOSing the browser could be a simple task for the web developer. If you want your website to perform bad you can always find a way.
    - layer8 2y ago
      The concern is about adversarial content.
branmcconnell 2y ago
I’ll admit that I was skeptical at first about including masonry in the CSS Grid spec. After reading through the article, I’m convinced it is the right path forward, allowing masonry layouts to utilize the same APIs and properties (columns/rows, gap, etc.) as CSS Grid. This would lower the bar of entry by using familiar APIs and allow simpler switching between masonry and other column/row setups responsively. ```css .example { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-rows: auto; @media (width > 500px) { grid-template-rows: masonry; } } ```
jmull 2y ago
Feels like a special-purpose layout that more properly belongs in a framework than CSS.
danjl 2y ago
The vertical layout is simple to implement. Horizontal is much harder, and more useful for media like images and videos, see Flickr. None need CSS. And, if you are going to do it in CSS, you better handle both, not just the easy less useful variant.
_akhe 2y ago
I do it on my portfolio site (https://www.bennyschmidt.com https://www.bennyschmidt.com) in JavaScript by maintaining a `colCount` with each column just being `flex-direction: column`. But after seeing this I should switch to using CSS. Didn't put too much thought into it, but when I realized it wasn't immediately simple in CSS grid just did it in JS.
- pricecomstock 2y ago
  I have it on my website (https://packagepicker.co https://packagepicker.co) in only CSS by using `flex-direction: column` and setting a best-guess max height with several breakpoints. Unfortunately it does break down in some situations because some pages have many fewer selections. My order doesn't super matter but I do like to maintain it. I tried for a long time using CSS columns but I didn't have good luck with that either, though I can't remember exactly why
luc_ 2y ago
Looks convenient, but another step towards a monoculture internet. :(
thih9 2y ago
How can there be an “inventing masonry” section without a reference to the masonry js library[1] - I suppose this is where the name comes from? [1]: https://masonry.desandro.com/ https://masonry.desandro.com/
hgyjnbdet 2y ago
Caveat: I know nothing about this, but have some experience with grid and flexbox. To my mind flexbox could be a basis for masonry way better than grid with less overhead. I also think mosaic would be a better name.
nsonha 2y ago
CSS is such a failure. Grid is the 3rd or 4th iteration of layout methods and still you need to think this much about how to code a layout? This is the most basic thing in UI and we've been doing it for 3 decades.

591 points by achairapart 2y ago

[dead]

I think it's really weird that this is considered. Masonry is a very specific layout implementation whilst the typical CSS layout feature is more foundational. Also, I think the need for masonry is vastly overestimated or perhaps not fully researched. It is presented/implied to be a common need but it isn't. Check the top 100 websites, check your personal top 20 websites, how many use masonry? I bet not that many, it's niche use case which also has plenty of usable alternatives. It also never even shows up in any developer surveys. Anyway, if we're into the game of building very specific layout solutions into CSS itself now, I'd argue the layout as seen on Google Image search is the far more useful one. It is somewhat of a horizontal masonry, but not really. Each image must keep its original aspect ratio (no cropping) whilst all images on the same row have the same height, thus filling the vertical space of the row fully. At the same time, rows must be roughly of the same height. There can be no gaps at the end of a row nor at the last row. Quite hard to implement, although there's articles describing how.

ivanjermakov 2y ago

def. grid: a network of lines that cross each other to form a series of squares or rectangles. Masonry layout doesn't form a grid, but multiple columns with a variable item height. I feel like this should not be a part of CSS spec, and absolutely not a part of CSS Grid.

niutech 2y ago
Yes, masonry has been already solved using CSS Multi-Column Layout: https://w3bits.com/css-masonry/ https://w3bits.com/css-masonry/

pimterry 2y ago

A really nice feature here is that if you view the demos in a browser that doesn't support this (i.e. all current stable browser releases without special flags enabled) because they're building directly on grid layouts, they still appear in a pretty reasonable fixed-row format: https://webkit.org/demos/grid3/ https://webkit.org/demos/grid3/. In each case it'd look much nicer with a proper masonry layout but it's still very usable otherwise (and of course you could feature detect to provide a better fallback if you're not happy with that anyway).

mg 2y ago

If one wants to do a "Masonry" layout, what's wrong with calculating it via JavaScript?

xrisk 2y ago
I’d rather have browser vendors responsible for a correct implementation. This seems like a rather nuanced feature.
- jampekka 2y ago
  With browser vendors you have to get them to do the same implementation. With JS/WASM it'll work across browsers given the more fundamental APIs work the same.
tambourine_man 2y ago
It’s less smooth, uses more power, requires more bandwidth, etc.
nolok 2y ago
You're asking "why render it correctly when we can render it wrong and then fix it afterwards".
- datascienced 2y ago
  An argument I would take more seriously if infinite scrolling was not a requirement too.
isodev 2y ago
Because why introduce a custom abstraction to implement something with an imperative scripting language when you can achieve the same result with a declarative language built specifically to address this use case? You'd rather maintain all the maths and JS dependencies for this than have browsers just render what you want?
- pavlov 2y ago

m3h 2y ago

I am wondering whether it makes sense to keep adding more "layout" options to CSS, given that we have the legacy floats and then the modern flexbox and grid layout. If there are still cases that are not covered, perhaps a better solution to to have one final constraints-based system that covers all layout cases, even if it comes at the cost of complexity. The CSS frameworks and utility libraries will then be built on top of it to provide the next generation of "masonry" grid, etc.

seumars 2y ago
The whole point of this initiative is to stop using out of date float-hacks, or soon-to-be out of date hacks to CSS grid or flexbox. Firefox's masonry layout is in fact implemented in such a way that basically covers all layout cases by simply adding a new attribute that collapses grid rows.
- m3h 2y ago
  >Firefox's masonry layout is in fact implemented in such a way that basically covers all layout cases That's good to know.
  - deleted 2y ago
    [deleted]
- deleted 2y ago
  [deleted]
- Terretta 2y ago
  > Firefox masonry... by simply adding a new attribute that collapses grid rows Not just Firefox, the proposal here is grid-template-rows: off;
zarzavat 2y ago
JavaScript is the final layout system. No declarative language can ever handle every use case. Fortunately I rarely need to resort to JS since grid came out. I’m not sure a constraint based system would do much good as it would sit awkwardly in the middle of grid and JS.

pimterry 2y ago

For more background, and some detailed discussion of the opposite argument ("display: masonry" over "display:grid"+"grid-template-rows: masonry") see https://github.com/w3c/csswg-drafts/issues/9041 https://github.com/w3c/csswg-drafts/issues/9041

rezonant 2y ago

Oh yes please. Masonry is definitely the missing piece right now. And I run into cases where designers give it to me pretty regularly-- I don't want to crush their dreams but without a JS-free masonry solution, the dreams are getting crushed. OK, having read a lot more, here's my thoughts. I love the possibilities that can be raised here when masonry is built into grid, but you can target specific rows and columns for specific elements in grid. This is a useful thing for some layouts, but when the rows are truly non-existent (unlike the related auto fill/fit stuff we've had until this point) I feel like the abstraction begins breaking down. As much as I love that we have Apple pushing to get this done, I do think it is probably better to go with a net new masonry display type :-/

mickael-kerjean 2y ago
100% for masonry as well, couldn't care less about the approach as long as the selected one doesn't see the same fate as websql and it becomes a viable solution in a reasonable amount of time.
- rezonant 2y ago
  Yes that's where I'm torn. I love seeing vendor interest either way. But grid is already extremely complicated, and so easy to get wrong it's a meme at this point. Creating even more confusion about how it's fundamentals work feels like the wrong path :-/

chrismorgan 2y ago

I strongly dislike the megamenu demo <https://webkit.org/demos/grid3/megamenu/ https://webkit.org/demos/grid3/megamenu/>, and feel masonry is completely inappropriate there. It makes a complete mess of flow direction, badly breaking expectations. The reading order you’d expect: https://temp.chrismorgan.info/2024-04-23-masonry-megamenu-2.png https://temp.chrismorgan.info/2024-04-23-masonry-megamenu-2..... What the demo actually gives you: https://temp.chrismorgan.info/2024-04-23-masonry-megamenu-1.png https://temp.chrismorgan.info/2024-04-23-masonry-megamenu-1..... This affects correct reading order and tab indexes. Basically, sighted users will always read things in the “wrong” order. This just drives home that there is no structure, it’s just an unstructured bag of links. Except… actually if you go through them in numbered order, it looks like there was some fairly logical ordering. It’s just been utterly demolished by inappropriate masonisation. (I’ve turned on “number items” in those screenshots. Normally, it’d look more like normal columns with no backgrounds.) The way it should be implemented is with columns, but adding `break-inside: avoid` on each section, which their demo has missed. The newspaper demo is also a little dubious for similar reasons, but it’s a much smaller deal. Now images and such media which are in more independent blocks and where reading order isn’t such an ingrained thing, masonry layout does work better there. There are still patches where things can be a bit iffy, mostly around tab indexing, but it’s not obviously wrong any more.

niutech 2y ago
Why not just use widely supported CSS Multi-Column Layout for masonry effect?
rezonant 2y ago
So you're saying the a11y tree and tab ordering is bypassing the actual ordering of content and instead traversing the columns one by one? I'd call that a bug. In a masonry layout the expectation of a sighted user is that there is no continuity from column to column, but instead through the visual line. And the "unexpected" (disagree) ordering you show does that. I think the issue would be that tab ordering is ignoring the raw ordering of the content and instead trying to emulate something visual, almost certainly some kind of hold over of the implementation as it currently exists.

mattbessey 2y ago

> This layout creates uniformly-sized columns, without any rows I find it amusing that they've decided to refer to this as masonry layout. If you actually built a wall like this (as opposed to uniformly-sized rows, without any columns) it would be a structural engineering disaster.

deleted 2y ago
[deleted]
cfj 2y ago
Probably influenced by the most popular JavaScript library for achieving this type of layout, Masonry[0]. The author notes at the end of the article: > But do expect the name of this value to change in the future. And perhaps prepare for a future where we call this “columnar grid” or “Grid Level 3” instead of “Masonry”. [0] https://masonry.desandro.com/ https://masonry.desandro.com/
- joenot443 2y ago
  I expect this is the case, if I had to describe that layout in iOS-land I'd also call it "masonry". It's a pretty common descriptor in the Wordpress world - grids/scrapbooks will often have masonry as one of their layout styles. Maybe 100 years from now when people are browsing in their neurodisplay they'll be able to think "masonry" and have their photos tile the way they like, never having heard of Javascript or CSS in their lives. Language is neat like that.
rezonant 2y ago
But masons build floors like this all the time, and it is not an engineering disaster. That's the metaphor. The reason you think it would be a disaster is the load of gravity against it, a concept they have not yet introduced into CSS, thankfully.
627467 2y ago
"masonry layout" is a term used for at least a decade[0] Pinterest is probably the most famous implementer of this layout [0] https://www.sitepoint.com/understanding-masonry-layout/ https://www.sitepoint.com/understanding-masonry-layout/

pavlov 2y ago

If the designers of Unix had seen the light of CSS, they wouldn’t have bothered with shells and file descriptors and C and Awk and all that composable flotsam. They’d just created a single program, call it the “Central Software System”, and defined thousands of properties that let you control its state machine to produce the output you need. Presto! The perfect computer. If for some reason someone needs a new kind of output, it can be added to the Central Software System via a friendly decade-long committee process. And if the properties happen to conflict in how they define some output, well, the one company in the world who has actually implemented all of this “open standard” can decide what happens in that case.

sebstefan 2y ago
You can say that about almost any abstraction layer
- gwervc 2y ago
  The WPF has easy to use grids and layouts, a sane default styling yet is very to completely overhaul. CSS is a failure by design.
  - sebstefan 2y ago
    Yes, but that's a completely different point
smokel 2y ago
They would probably also use regular expressions and incomprehensible $ and \ escape codes to retain some of the fun.
datascienced 2y ago
Is this a sysvinit vs systemd rant?
- HeckFeck 2y ago
  $ /etc/init.d/initwar start Starting initwar (via systemd) Sad sysadmin noises

pquki4 2y ago

I thought this kind of waterfall layout was cool and trendy a few years ago, but these days very few websites are doing it?

rezonant 2y ago
A big reason is because it's not possible on the web, and it's worth noting that the kind of visual you see in masonry demos is the most extreme example of what you could do with it. Most of the time it's: I want to fill a page with modules of differing heights where positionality is based on importance not coordinate, without weird gaps where items fall into the same row and constrain each other.
nkozyra 2y ago
For awhile it was just described as "Pinterest style." It has some use cases but for the most part it's literally a wall of unstructed information. Difficult to parse and build any mental hierarchy. It's also ... incredibly easy to do with existing css.
- iainmerrick 2y ago
  I would hope we're getting over trying to make other websites look and behave more like Pinterest. Pinterest exemplifies the worst of the web in several ways.
- thousand_nights 2y ago
  > incredibly easy to do with existing css care to demonstrate? given a dynamic collection of images where you don't know the aspect ratios beforehand
  - niutech 2y ago
    Here is the demo: https://w3bits.com/css-masonry/ https://w3bits.com/css-masonry/
  - crote 2y ago
    Does it actually solve that problem, though? In the photo demo all content is either 1-column or 2-column wide - and that already results in some very noticeable gaps. I don't get the impression that it can properly handle arbitrary aspect ratios. You're pretty much forced to stick to a single column width and fit all images to match, so not exactly an improvement over what we already have right now.

lovegrenoble 2y ago

I always preferred to use Flexbox on almost everything; it's suitable for most situations. Also, for anyone struggling with flexbox - I use this tool to streamline the process: https://flexboxcss.com https://flexboxcss.com

ThatMedicIsASpy 2y ago

I already use this. On Firefox I just enable it in the options and make use of it for my bookmarks. On Mobile this isn't an issue since it's just stacked on top of each other (no about:config on mobile). The last image has it turned off. https://imgur.com/a/o7OyZEW https://imgur.com/a/o7OyZEW

jamincan 2y ago
From what I can tell, the rules of masonry layout result in irregular sorting since, from what I can understand, it fills by row the highest available slot first, but the result visually appears as though it's sorted in columns. So if you resize your window, the order of your bookmarks would change.
somishere 2y ago
Try Firefox beta on mobile :)

codingclaws 2y ago

I built a masonry layout with only CSS and HTML 10 years ago. The site is actually still live. A scripting language is used to generate the HTML and CSS based on the dimensions of the images. But the masonry runs left to right not top to bottom.

thejohnconway 2y ago
How does that differ from just setting the images to be inline-blocks? Was it justified?
- codingclaws 2y ago
  It's centered basically. All rows span the same width, but the heights of the rows can differ.
The_Colonel 2y ago
That's not going to be responsive which is today a must have.
- codingclaws 2y ago
  It is actually responsive, I think because I used percentages in the CSS.
  - The_Colonel 2y ago
    So it makes pictures larger / smaller based on the screen width? Usually what is expected is that with narrower screen, you get fewer columns, pictures are still same-ish size. You also need to keep the order of the items (e.g. on a wider screen 1, 2, 3, 4 are all on one row, with a smaller screen 1 and 2 are on a row, then 3 and 4 on another row).
    - CodeWriter23 2y ago
      So no different than current design paradigms (which I loathe btw) which give you the exact same content regardless of viewport size.

KwanEsq 2y ago

Nice to see this getting some push and attention. I still remember seeing Mats Palmgren (seemingly?) single-handedly proposing/speccing and implementing this in Firefox a few years ago. Glad it hasn't just died because it was a Mozilla proposal/experiment (with proper experimental stage), instead of something Google just dumps on the web fait accompli.

slimebot80 2y ago

Is there any examples of server-side rendering that pre-determines a masonary layout for the content? Like: Given these images, and this window size, here's a calculated layout to make them all look nice... I figure this would be more performant than any type of JS polyfill

echoangle 2y ago
How would this work when loading the page the first time? Would you check the window size and reload once just to get the first layout? And would you reload the page every time the window is resized?

phkahler 2y ago

Umm. Can't you just make each column a subgrid within a larger grid that has one row? It seems like either these constructs are poorly designed, or people don't see how to use them to get what they want.

PullJosh 2y ago
As I understand it, the hard part of a masonry layout is ensuring that items are laid out with the first items near the top of the screen and the last items near the bottom of the screen. If you just plop your items into columns, the first items will all appear in the first column and the last items will all appear in the last column (left to right), which is not the behavior you want. To my knowledge, the correct behavior cannot currently be created in CSS alone. (Or if it can, it must be a wild hack.)
- phkahler 2y ago
  If people want to choose where things land they can do that. Therefore I assume we're talking about a scenario where the items are not known in advance - i.e. they come from a database query or similar. Is there no way to SELECT every Nth item when doing a query? Return a count and select where count MOD N = k? Dump those in a column. This feels like "I want my layout algorithm to be part of the standard." and if you don't think so, see the part where they also want the equivalent of "colspan = 2" for some itmes - possibly with another pattern to define which ones.
  - micromacrofoot 2y ago
    > "I want my layout algorithm to be part of the standard." I mean, yes... it's a very common layout algorithm so it gets standardized
  - threeseed 2y ago
    But what if you resize the browser or turn the screen on your iPad. Would you really want that to trigger an entirely new set of SQL statements ?

achairapart 2y ago

So, the background story is that CSSWG DevRels from browser vendors are debating how to formally include the Masonry layout into CSS, at least since 2020, when Firefox first proposed it. The news here is that people at WebKit decided to push the debate to the public, inviting designers and developers to take some action (“post to social media, write blog posts”), in order to get past this. While it may look just like a formality, I think this will make an important precedent. The real underling debate here is either to treat every layout option as a part of the CSS Grid, or keeping adding new CSS Display proprieties as necessary. The first option will make even more complex the (already convulsed, IMHO) CSS Grid specs, the latter will bloat the CSS specs with a load of new proprieties (and related sub-proprieties). Either way, it's not as easy as it looks.

pier25 2y ago
I don't know about the implementation but it makes zero sense that masonry should be part of grid. It's not a grid!
eternityforest 2y ago
I've yet to ever find a use case for grid.... I'd prefer this be a flex box feature so I can continue ignoring grid. But it seems like they have good reasons for including it, so I suppose I'll have to actually practice with grid more!
niutech 2y ago
Masonry is easy and has already been solved using CSS Multiple Columns: .masonry { column-count: 6; column-gap: 10px; }
mvonballmo 2y ago
A "row-less" grid fits very well in the current CSS Grid specification, in that it can reuse the very powerful column-definition property as well as sub-grids. Their examples very convincingly show how orthogonal these features are. Mostly, you just write grid-row-template: masonry and everything else just works with it. This is nice. It doesn't become harder to use the grid layout than it already is IMHO. The drawback is mostly for browser-engine authors, for whom the bar for "fully supports CSS Grid" will be set even higher. They also mention that it might avoid "performance traps" where an implementation that needs to support all features of grid might be slower at some parts of grid layout than it would be if the specification were simpler. If there were a separate display mode, then you'd have to repeat the grid-column specification for the masonry layout, which seems a shame.

tomp 2y ago

This is readily achievable today with `columns`: https://primozic.org/aesthetics-art https://primozic.org/aesthetics-art

sn0wleppard 2y ago
That example doesn't achieve the second objective of the proposal, "It distributes content across the page (instead of flowing down each column, one by one)."

emadda 2y ago

Related: I created an interactive demo of grid principles here: https://cssprinciples.com/3/grid/ https://cssprinciples.com/3/grid/

victor106 2y ago
this is very educational and useful
- emadda 2y ago
  Thanks Victor, it means a lot :)

6510 2y ago

My proposal would be to put the image dimensions in the name of the image file. example-400x200.jpg Without that I cant think of an "easy" to implement formula to keep each column the same length. If given a group of numbers, how would one divide them into 8 groups the same size? Extra fun: You may increase each number by n in order to make each group exactly the same size. n must be as small as possible.

paulhilbert 2y ago

"Others are questioning whether or not this kind of layout is needed on the web at all — they aren’t sure that well-known websites will use it." Would it instead be possible to exclude anyone with that attitude from a discussion about an open standard? I know this sounds toxic, but I would argue that approaching public design this way is ultimately more toxic wrt the outcome and those affected by it. Or maybe I misunderstood that part since everyone seems to not be bothered by it at all here...

deleted 2y ago
[deleted]
rolha-capoeira 2y ago
And honestly, that's a ridiculous claim. Two very popular websites I can think of right away are Pinterest and VSCO. (Perhaps VSCO on the web isn't as popular as the mobile app, but the company continues to use masonry as the design evolves.)
- grub5000 2y ago
  Lots of sites that return a ton of images, like an of the image search sites (Google, Bing, DuckDuckGO, loads of porn sites etc.)
gwbas1c 2y ago
> Would it instead be possible to exclude anyone with that attitude from a discussion about an open standard? That attitude is rather critical and important to the discussion. I don't think it's the browser, or the standards bodies, responsibility to have built-in support for every possible feature we can imagine. Instead, the standards need to be simple and extensible so that that libraries (Javascript or WASM) can do creative layouts. (IE, instead of waiting for Masonry layout in CSS, you should be able to grab a Masonry layout library and include it with your web site.) Otherwise, we're building a system where the standards (CSS in this case) are so complicated that it's getting harder and harder to implement the standards; and are too inflexible to support what tomorrows' developers can imagine.
2y ago

t_mann 2y ago

I really like the general look and feel of masonry/waterfall layout, maybe it's because I grew up reading physical newspapers (and still do), but to me a columnar layout is just an intuitive way to divide up a page. I just wish there was an alternative to the default masonry ordering, which afaik is a simple rule that goes sth like 'place the next item in whichever column it can go up highest'. This means that the left-to-right order is really juggled from the second row onwards. What I imagine would be really nice is if there was a layout that preserves more of the left-to-right (or right-to-left, if that's your preferred direction) reading flow. Something like 'put the next item one column to the right of the previous item (or in the leftmost, if you were at the rightmost), unless you can put a second item in the same column without the new bottom going too far below the bottom border of the column to its left'. This would be more flexible than strictly going left-to-right (which would also mess up alignment) and would reatin some meaning of the left-to-right reading direction. I know it won't be possible to accommodate every possible formula one could prefer for masonry, but if you have content where the ordering matters at least a bit (maybe not for Pinterest, but for a journal eg it would), then I really think sth like this would be a more sensible default than the classic masonry rule.

iainmerrick 2y ago
It's the left-to-right ordering that's the problem. I'm fairly sure there's no way to order things left-to-right in this layout without inevitably having to skip around haphazardly. In a magazine-style layout, wouldn't you read the columns top-to-bottom first, then left-to-right? You can accomplish that already in CSS with either 'columns' or vertical flexbox. Another issue with this 'masonry' layout is the ragged edge at the bottom. In a magazine that would presumably be justified -- again something you can do with columns or flex. On the web, I guess there's a hidden assumption that you'll have endless scrolling content, so it doesn't matter what the bottom of the page looks like? If so, that's not necessarily something that should be encouraged.
- vidarh 2y ago
  The main use for this will presumably be infinite scroll where columns doesn't work because it'd break all expectations when scrolling.

fmy105 2y ago

[flagged]

presentation 2y ago
Why would breakpoints be an issue? They’d just work the same as any other CSS feature wrapped in a media query.

Unai 2y ago

I really don't like how disingenuous, propagandistic and patronising Simmons is being in this article. Ending each section saying "all this will be impossible if not done the way I like", which is absolutely not true. There's not one reason why anything that can be done in "display: grid" couldn't be done with "display: masonry". But I think, and I hope, that people aren't the fools she's taking us for, and can see how absurd her proposition is. You could basically clone the grid specification, if you want all those features, and that way both can be developed with what works for each. She says doing that means new grid features might take more time to come to masonry. Really? More time than having to deal with new grid features that won't work at all with your version of masonry integrated in grid? You're still having to deal with two layout systems, even if you want to disguise one of them. Except doing it your way you can't select which system gets the features that work with it. At the end, instead of two layout systems with two complete sets of features, we'll have one single layout system with a bunch of features that sometimes work and sometimes doesn't, depending on a particular value of a particular declaration that you'll have to know about. And that's why people hate CSS. Seems lazy and an absolute mess to maintain. And it doesn't make sense at an intuitive level, since masonry works similarly to flexbox, not grid; and it doesn't make sense at a logical level either, since a masonry layout is not a grid. But I guess this is what we'll end up getting, since apparently anything Jen says goes. Like the ridiculous idea of doing "CSS4", which means nothing, does nothing and is nothing, but we're going with it for some reason anyway.

SigmundurM 2y ago
I wonder, what theoretical features could we have for a modular grid that'd be fundamentally incompatible with a columnar grid, and vice versa? If adding columnar grids to CSS Grids doesn't make any features impossible, then I don't see why we shouldn't just have one CSS Grid standard, and thus always ensure feature parity between modular and columnar grids. The argument being portrayed by Simmons, as I understand it, is that every feature that currently works for CSS Grid's modular grids, would also work for a columnar grid.
troupo 2y ago
> I really don't like how disingenuous, propagandistic and patronising Simmons is being in this article. Ending each section saying "all this will be impossible if not done the way I like" This is a very uncharitable way of reading this, and that's a polite way of describing this view. She shows what is possible, and how existing grid mechanisms can be leveraged for masonry layout. It's implicit that coming up with a proposal outside the grid would need to accommodate the same capabilities somehow. How is it patronising or disingenuous? They (and Firefox) literally implemented this and are showing what is possible. And are asking you for input. If you think you're incorrect, you can join and show them the error of their ways: --- start quote --- Our hope is that web designers and developers chime in (post to social media, write blog posts) with your thoughts about which direction CSS should take. Some people, including those of us at Apple, like having “Masonry” be part of CSS Grid. We believe this functionality is a mechanism to expand CSS Grid — allowing it to finally create columnar grids as well as modular grids. And we want this functionality to be mixed with all the other features of Grid, including the powerful options for defining a columns, track spanning, explicit placement, and subgrid. Other people instead believe Masonry should be its own separate display type. At first glance, defining Masonry with a new display type might make a lot of sense. You do get a tidy separation between layout types. --- end quote ---

egypturnash 2y ago

I feel like I spent this whole proposal waiting for "grid-template-columns:masonry" to be discussed.

nofunsir 2y ago

No thank you. I just want all the whitespace to take a hike. I certainly don't need this layout if webdevs are just going to put all the content on the center 1/3 to 1/4 of my screen.

hwbunny 2y ago

Webkit team snorting cocaine? look at this, how intuitive, how readable: grid-template-columns: 14ch repeat(auto-fill, minmax(28ch, 1fr)) 14ch; just throw the whole grid thing out of the window and get on board someone who can create syntax that wouldn't send you to jump off a cliff and feels like it was made by a fellow human being, not an AI controlled robot.

hombre_fatal 2y ago
Well, at least show us your ideal replacement for that logic that's more intuitive. Until then, these complaints usually cash out into unfamiliarity + assuming it's very hard to understand if you were you trying to understand it. Declarative UI is a very hard problem, so it's not always going to be `text-decoration: underline`.
- hwbunny 2y ago
  [flagged]
- risenshinetech 2y ago
  Many things are hard problems, but you don't need to be an expert to recognize an obviously bad solution. If you had showed someone the first bicycle, and it came with 3 differently sized wheels and a spike for a seat, you wouldn't have to provide an "ideal replacement" to know that it was a bad design.
  - JamesSwift 2y ago
    Which part of this is the spike for a seat? > grid-template-columns: 14ch repeat(auto-fill, minmax(28ch, 1fr)) 14ch;

Onavo 2y ago

Can you add drag and drop to this? Currently you need libraries like https://gridstackjs.com/ https://gridstackjs.com/, especially for nested cases.

turboat 2y ago

Suppose we could create a backwards-incompatible system to replace CSS. How would we do it? Are there any books or papers on how to create a coherent layout system? What about alternatives like Qt, Tk, SwiftUI, etc.? I've never used anything besides CSS. Are any of the actually-implemented systems in the wild better? If so, what makes them better? I want a system that provides a better interface for developers, but how? If we could start over, what are the design principles?

eyelidlessness 2y ago
One thing to be cautious about when selecting prior art for reference is that CSS sets a high bar for declarative control. I can’t speak to any you mention in detail, but my sense is that more comparable prior art would likely be found in print use cases.
pphysch 2y ago
CSS is overall pretty great and I've seen at least a couple non-web GUIs rip out their bespoke GUI systems and replace them with CSS or something very much like it. I think the big change will be better support for hierarchical definitions, including but not limited to nesting. TFA discussion would be pretty moot if there were namespaced properties that could somehow fit under display: masonry; rather than polluting the global namespace.
- turboat 2y ago
  I have to assume that's partly because of the availability of implementations, tooling, and developer familiarity. Many platforms will let you toss in a web view, and if you want to set up e.g. a configuration screen with text and toggles, HTML/CSS will get the job done, more easily than maintaining a custom system that's peripheral to the core purpose of your app. I don't want to be overly negative, but I just can't view CSS as "pretty great." I appreciate the inherent difficulty of using 1-dimensional static text to specify a 2-dimensional dynamic layout. Still, basically every programming problem involves defining abstractions over some domain concept and expressing that in the syntax of your programming language. Somehow that's harder in CSS than any other language I've used. Within web dev I find both HTML and JS much easier to work with, despite their imperfections.

SassyBird 2y ago

Reposting as a top comment for more visibility: I have a website with my photos, which doesn’t use any JS for layout. When I was making it, I considered using JS masonry libraries, but I wasn’t satisfied with the results. Proper masonry layouts which fill all available space in practice actually crop some images. Leaving space around photos is required when you don’t want cropping and want to preserve aspect ratio. The only way not to do that is to have infinite scroll, which I guess is what corporate addiction machines want, but that’s not what I want on my own website. Here is what I did: https://yakubin.com/photography/albumless/ https://yakubin.com/photography/albumless/ https://yakubin.com/photography/album/kenya-2023/ https://yakubin.com/photography/album/kenya-2023/ I used display:inline-block to achieve this result, effectively treating photos as text that needs to reflow into new lines. I’m very satisfied with the result and prefer it over what the masonry libraries do.

datagram 2y ago
Flexbox was designed for these kinds of layouts, so that would also be an option here.
qingcharles 2y ago
I don't use JS for masonry layout. I have a fallback from the current masonry CSS solution to a supported CSS solution. The problem is ordering. The current CSS-only solutions work fine as long as the order is not important. (though you will still end up with weirdness at the bottoms of the columns IIRC)
FireInsight 2y ago
You could probably have done this layout in a couple lines of CSS with a row-oriented flexbox that wraps and is center-aligned. That would be the more standard way to do it too.

specialist 2y ago

Neat. I like it. Out of curiousity, why don't browsers have pluggable layout managers? Like Java's AWT/Swing LayoutManager. [1] Fussing with CSS and Java's stock layout managers (gridbag, table) always fills me with frustration and anxiety. In my experience, for the fussy work, it's easier to explicitly code what I want. Ages ago, inspired by Designing Visual Interfaces [2], I made a layout manager [3] for canonical design grids [4]. It was pretty neat. Fluent API. Always visually correct. All the baselines aligned just so. Predictable results. Perfect for banging out CRUD forms. [5] 1/ https://docs.oracle.com/en/java/javase/21/docs/api/java.desktop/java/awt/LayoutManager.html https://docs.oracle.com/en/java/javase/21/docs/api/java.desk... 2/ https://www.amazon.com/Designing-Visual-Interfaces-Communication-Techniques/dp/0133033899 https://www.amazon.com/Designing-Visual-Interfaces-Communica... 3/ https://web.archive.org/web/20110302212909/http://java.net/projects/designgridlayout/pages/Home https://web.archive.org/web/20110302212909/http://java.net/p... 4/ https://web.archive.org/web/20110308034949/http://designgridlayout.java.net/grids.html https://web.archive.org/web/20110308034949/http://designgrid... 5/ https://web.archive.org/web/20110515182322/http://wiki.java.net/twiki/bin/view/Javadesktop/DesignGridLayoutExample?TWIKISID=e1a6667476691b56753dc9b0744828c6 https://web.archive.org/web/20110515182322/http://wiki.java....

aidog 2y ago

I absolutely want this. I have wanted this for years. This is a form of grid so it should be in CSS grid. Especially since it has tracks. Browser makers, please just ship this.

account42 2y ago

I absolutely hate this kind of layout, especially when combined with infinite scrolling. Makes it impossible to systematically go over all items.

amadeuspagel 2y ago
It's not meant for things that you want to systematically go over, it's meant for things that you want to explore.
- layer8 2y ago
  Some people want to go systematically over the items when exploring. I certainly tend to operate that way, and it’s infuriating when the UI is making it difficult for no good reason.
  - yau8edq12i 2y ago
    I guess in that case you can just browse other websites. No website can pander to everyone.
    - yashap 2y ago
      Not sure why you’re being downvoted, it’s true. If you want to display items (normally images) with different dimensions, while respecting their natural height/width ratios, you really have 2 options: 1) Fixed height rows: lower information density (excess white space around some of the items), but easier to scan systematically 2) Masonry layout: higher information density (no excess white space around items), but harder to scan systematically Nobody is “right” here, it’s simply user-by-user preferences about what you prefer.
      - account42 2y ago
        It doesn't even make efficient use of space because the size of items depends on their aspect ratio. Fixed size cells is a much more sensible approach.

thebeardisred 2y ago

If this leads to more "forever" scrolling pages where I can never get to the footer I'll lose my goddamn mind.

spintin 2y ago

You can very simply do this with javascript. Browser developers are now reaching for straws to remain employable. That said the biggest tasks remains: - Go back to HTTP/1.1 with "One time password" auth.: https://datatracker.ietf.org/doc/html/rfc2289 https://datatracker.ietf.org/doc/html/rfc2289 - Simplify the browser so that it can be compiled in less than many hours on the latest CPU. - Completely remove the tie-ins to any commercial/governmental entities. Basically go back to Netscape with some improvements to javascript performance and hardware accelerated rendering of HTML. Everything else invented in the last 20 years is meaningless. This is valid in most domains: Raspberry Pi is the only real exception.

paradox460 2y ago

It feels good to see the webkit team actually doing good, publicly visible work again When I was cutting my teeth in web design, the early webkit blog and safari releases were always inspirational. The rate at which they pushed out new features in the mid 00s was astonishing

qingcharles 2y ago
They've definitely brought in some new people. AFAICT the reason Safari even has Masonry support is because they brought in the (very talented) guy that wrote the CSS spec for it.

cnotv 2y ago

I evaluate the CSS updates based on the gap in masonry layout achievement. It's one of the most important layouts that have existed for more than a decade and should have been the only achievement after flexbox and grid. If you have a bunch of media, unless you have a narrow container like FB/IG, that's the only way to go. The alternative is fixed ratios. Anyone who has been working in FE knows it.

roblh 2y ago

I found a really cool way to do this with svelte and css grid a few months ago, based on a blog post I can't seem to find now. A full masonry layout too, not just columns, but each element can have dynamic height and width. The thing that made it click for me was that you don't have to make the grid rows and grid columns 1:1 with the full width/height of each element. Making 10px or 20px rows and columns and then using a svelte component for each image that chose a number of columns and rows based on the image aspect ratio. I'll see if I can make the repo public today. Edit: reading further, I think my approach was basically the same as theirs near the end of the post!

qingcharles 2y ago
You can make something very close, but you can't order the items the same as you can with the new property (so if the order is important this might be a dealbreaker), and IIRC you end up with less attractive, more-jaggy bottoms to the columns.

fzeindl 2y ago

I never understood why CSS would not just adopt Apple's Autolayout and be done with it: I want to specify that this space should be equal to that space, these borders to grow, and those borders to shrink and this point always aligned to that point. It is simple, intuitive, it works for all cases. Instead we are inventing, what, the fifth generation of CSS-layouting now? Does nobody think this is odd?

pornel 2y ago
> it works for all cases It's only a fixed 2d arrangement. It isn't any more expressive than the CSS table layout or position absolute+relative combos. It has no ability to react to size constraints in any other way than naive stretching and hitting min-width hard. It can't do anything "responsive" like wrapping items to the next line, or switching a grid from 1x6 to 2x3. You can't make masonry in autolayout constraints, other than precomputing specific constraints for every item, which won't automatically reflow the items to a new container width.
layer8 2y ago
It’s difficult to unambiguously and usefully specify what should happen when not all constraint can be fulfilled. And you can likely also DOS browsers by exponentially exploding constraint calculations. CSS is bad as a layout system, but I also don’t like constrained-based layout systems unless they enforce that the constraints can always be fulfilled and be calculated in reasonable time. Which implies that you wouldn’t be able to change the layout willy-nilly client-side with JavaScript.
- fzeindl 2y ago
  Checking that the layout isn‘t exponentially complex and DOSing the browser could be a simple task for the web developer. If you want your website to perform bad you can always find a way.
  - layer8 2y ago
    The concern is about adversarial content.

branmcconnell 2y ago

I’ll admit that I was skeptical at first about including masonry in the CSS Grid spec. After reading through the article, I’m convinced it is the right path forward, allowing masonry layouts to utilize the same APIs and properties (columns/rows, gap, etc.) as CSS Grid. This would lower the bar of entry by using familiar APIs and allow simpler switching between masonry and other column/row setups responsively. ```css .example { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-rows: auto; @media (width > 500px) { grid-template-rows: masonry; } } ```

jmull 2y ago

Feels like a special-purpose layout that more properly belongs in a framework than CSS.

danjl 2y ago

The vertical layout is simple to implement. Horizontal is much harder, and more useful for media like images and videos, see Flickr. None need CSS. And, if you are going to do it in CSS, you better handle both, not just the easy less useful variant.

_akhe 2y ago

I do it on my portfolio site (https://www.bennyschmidt.com https://www.bennyschmidt.com) in JavaScript by maintaining a `colCount` with each column just being `flex-direction: column`. But after seeing this I should switch to using CSS. Didn't put too much thought into it, but when I realized it wasn't immediately simple in CSS grid just did it in JS.

pricecomstock 2y ago
I have it on my website (https://packagepicker.co https://packagepicker.co) in only CSS by using `flex-direction: column` and setting a best-guess max height with several breakpoints. Unfortunately it does break down in some situations because some pages have many fewer selections. My order doesn't super matter but I do like to maintain it. I tried for a long time using CSS columns but I didn't have good luck with that either, though I can't remember exactly why

luc_ 2y ago

Looks convenient, but another step towards a monoculture internet. :(

thih9 2y ago

How can there be an “inventing masonry” section without a reference to the masonry js library[1] - I suppose this is where the name comes from? [1]: https://masonry.desandro.com/ https://masonry.desandro.com/

hgyjnbdet 2y ago

Caveat: I know nothing about this, but have some experience with grid and flexbox. To my mind flexbox could be a basis for masonry way better than grid with less overhead. I also think mosaic would be a better name.

nsonha 2y ago

CSS is such a failure. Grid is the 3rd or 4th iteration of layout methods and still you need to think this much about how to code a layout? This is the most basic thing in UI and we've been doing it for 3 decades.