4 ms·

> 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.
- echoangle 2y ago
  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?
  - nkozyra 2y ago
    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.
nkozyra 2y ago
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."
SassyBird 2y ago
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/albumless/ https://yakubin.com/photography/album/kenya-2023/ 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.

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.

echoangle 2y ago
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?
- nkozyra 2y ago
  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.

nkozyra 2y ago

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."

SassyBird 2y ago

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/albumless/ https://yakubin.com/photography/album/kenya-2023/ 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.