7

Fuck you Flexbox, wasted my time on you bitch.

Comments
  • 5
    You are not worthy

    Jk
  • 1
    @M1sf3t it doesn’t support 2d grids like masonry, you need dirty hacks to be able to make those kind of things.
  • 1
    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.
  • 1
    I’m leaving js solution to the end, trying not to touch it lol
  • 1
    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.
  • 4
    @milkyway flex isn’t supposed for 2D positioning
  • 1
    @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.
  • 2
    padding-bottom: 100%; done.

    That's how instagram works, too.
  • 1
    @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.
  • 1
    just position: absolute everything
    responsiveness is so 2018
Add Comment