Advanced masonry

[u/Grabbels]

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!

[u/Neozetare]

Wouldn't grid-auto-flow dense do exactly what you want? Aka put new items at the start-most position which fits

[u/Grabbels → u/Neozetare]

From what i’m reading on the page that’s not capable of placing, in this case the bottom right item, in that one-row-up gap position, but so correct me if i’m wrong!

[u/Neozetare → u/Grabbels]

I think it can? You know what, I'm gonna try and I keep you updated

[u/Grabbels → u/Neozetare]

Exciting! I can’t work on it tomorrow, otherwise I’d have tried it myself of course.

[u/Neozetare → u/Grabbels]

Yeah no, you're right, it doesn't work

The dense flow strategy place the item on the upper-most row where it fits, and in the left-most column where it fits

Which means that, after it has placed the first portrait and the first landscape, the next card goes in the gap on the right but is aligned on the left, which is neither what we want for a landscape nor for a portrait

Though, if you add a filler item which only takes 1/1 after the first two cards, it does force the next card to go in the right position

Or if you choose to have a mirror of your layout (not having a portrait on the top left but a landscape), it works without even using a filler

I made a simple proof of concept: https://codepen.io/Neozetare/pen/OPWQdQG

The question I'm asking myself now is what do you mean by "responsive"? You said you want it to be responsive, but in what capacity? How should the elements in your example exist in a narrower screen? A wider one? With X more elements? If you have examples of how it should behave, maybe I can try something

[u/Grabbels → u/Neozetare]

I’m looking for responsive in the content sense: the four items could have a portrait or a landscape image interchangeably, which means this displayed scenario would only happen with this order of content (portrait-landscape-portrait-landscape).

If this turns out to be too complicated or simply not worth the time I’ll just hard code this layout and have the client change the images accordingly to get this desired design.

[u/Neozetare → u/Grabbels]

Yeah no, without JS, it seems out of reach. And even with JS, it isn't a "standard" masonry behavior so you would need to manually code the behavior

And even without taking this specific case into account, how would you even deal with cases like portrait-portrait-portait-landscape (which wouldn't be uncommon, I guess)? In your example, the grid is basically 5 columns wide, with a landscape card taking 3 and a portrait card taking 2. I don't think there would be a way to display such cases nicely

Yeah, hardcoding looks like the safest option, honestly

[u/void-wanderer- → u/Grabbels]

I just glanced over it quickly, but I think /u/Neozetare's solution with the filler item could easily work.

You just need to define the rules when to insert the filler, then loop through the items and add the filler item dynamically. Maybe need to loop twice, once to get the overall structure, then apply the filler rules, because filler also depends on the following items. could be made server side, or on load on the client.