Hacker News Reader

Comment by pquki4 | Hacker News Reader

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

View on HN

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.

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.

> 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

All of the images have only a constraint on the width, the aspect ratio is irrelevant. You can still do it with a grid, you just let the browser render the images within as it would normally.

Where it gets more complicated is getting them all to align horizontally at the bottom, which even this proposal doesn't do. Pinterest, of course, solved this by not having a "bottom."

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.

It does handle arbitrary aspect ratios by scaling the image to fit the width of the column. What else should it do? It also allows you to define different widths for each column. Isn’t that exactly what you want for a masonry layout?

If, for example, it rendered the child elements such that they automatically gained/lost overflow in relation to other columns, it might have some practical application that straight CSS cannot do. This would allow children to be sized vertically (effectively cropped) to produce an even square.

Not the GP, but here is my website with photos with different aspect ratios. I used display:inline-block to achieve this result, effectively treating photos as text that needs to reflow.

https://yakubin.com/photography/albumless/

https://yakubin.com/photography/album/kenya-2023/

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. That’s why I prefer my solution over what JS libraries for masonry layouts do.

Here is the demo: https://w3bits.com/css-masonry/

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.

Yeah, it's quite weird to see such an obscure feature being proposed as a CSS standard. The demos just aren't convincing? Sure, I get the Pinterest application, but the other ones seem like a solution in search of a problem.

In the megamenu demo the multicolumn layout is pretty much indistinguishable from masonry. The only thing wrong with it is that it allows column breaks in the middle of content. That doesn't need masonry to fix it.

In the newspaper demo the multicolumn layout is actually better, because that's how newspapers work. The masonry demo becomes an unreadable mess.

The museum demo almost feels intentionally mis-designed. The CSS Grid 1 layout obviously has issues, but it could've easily been solved by pulling the nav bar out of the gallery, and using a multicolumn layout for the gallery instead.

So that leaves the Pinterest-style photo gallery. Sure, it's objectively better if you want to achieve this kind of style, but it's an outdated design with horrible UX. Why is it special enough that we need explicit support for it in the standard?

It's been called masonry before Pintrest was even founded.

I don't doubt it, but it certainly wasn't common web design terminology. Waterfall was one I encountered frequently.

Reply on news.ycombinator.com