Hacker News Reader

Comment by thousand_nights | Hacker News Reader

> 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/

Reply on news.ycombinator.com