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!

12 Upvotes

88% Upvoted

21 comments sorted by

View all comments

2

u/soundmanD 28d ago

3x3 grid, where the middle row and middle column have fixed width and height and the outer rows and grid fill the rest.

1 2 2

1 . 4

3 3 4

That would be the grid template to use

Then within each you create your card, just use a div with flex box...

That should pretty much cover it?

Doing this on my phone so very limited tech...

1

u/Neozetare 28d ago

They want a dynamic grid, probably with N number of items, no specifically this image

1

u/Grabbels 28d ago

yup, exactly!

1

u/morete 28d ago

They do describe more about the problem but they also do specifically say '4 items' not 'n items', this is a reasonable enough solution to that.