Fuck you Flexbox, wasted my time on you bitch.

You are not worthy

Jk

@M1sf3t it doesn’t support 2d grids like masonry, you need dirty hacks to be able to make those kind of things.

Yes, you can do it with flexbox but with dumb conditions like having a fixed height for the container. Even css grid solution for masonry is not that clean you have to know the dimensions of the cells in advance.

I’m leaving js solution to the end, trying not to touch it lol

I thought about modifying the height but it seems too complex since I have more cells to be loaded. The simple use case is to have Pinterest layout here. I don’t know how they did it. A lot people mimicking it, but I haven’t find anyone with exact responsive solution as they have.

@milkyway flex isn’t supposed for 2D positioning

@M1sf3t I want something similar to this question https://stackoverflow.com/questions...
But didn't like the answer since it has only 4 levels of items heights in the section "CSS Grid with item dimensions defined".
So I moved on and found this pen https://codepen.io/traceypooh/pen/...
The closest to what I want but I don't think it's a perfect solution since items heights fallback to one of the values [2,3,.., 9 ].
And I need to prefetch images dimensions in advance.

padding-bottom: 100%; done.

That's how instagram works, too.

@M1sf3t I think I’ll implement something similar to the pen and increase heights levels to match variance in images heights.
I will implement prefetching of images dimensions too as it seems Pinterest doing that too.

just position: absolute everything
responsiveness is so 2018