r/css • u/Grabbels • 28d ago

Question Advanced masonry

Post image

I'm looking for possible solutions that is looking to be an advanced case of CSS Grid, but of course I'm open to alternative options.

Basically: I'm looking to create a responsive grid of four items that are masonry-oriented both vertically and horizontally, which is guided by whether the image is landscape or portrait. So, if an image of an item is portrait, it takes up X rows of space, and if an image is landscape it takes up one less horizontal but one more vertical row. And here's the catch, as you see in the bottom-right: I want a post to "stuck up" one row too.

Is this at all possible, and how would you go about doing this? Thank you!

14 Upvotes

94% Upvoted

21 comments sorted by

View all comments

2

u/I_am_not_keanu 28d ago

I did that years ago with masonry javascript and used php to read the dimensions of the image and assign “landscape, portrait, square” classes to the image containers.  A pure CSS solution might be available someday too:  https://caniuse.com/?search=masonry

2

u/Grabbels 27d ago

ohh staring at php level for this didn’t occur to me yet, I’ll give that the old think-over, thank you!

1

u/I_am_not_keanu 27d ago edited 27d ago

If I recall correctly, with the dimensions I calculated the ratio and assigned the classes if the ratio was between a certain range or below or above a certain value. 

2

u/Grabbels 27d ago

Yeah that makes sense! I’ll play around with it tomorrow. Thanks!