Floated divs won't stack properly (without gaps)

Question

I have a container with many floated items. The problem is when the size of at least one of them changes, a gap occurs. Is there any way to force them to fill these gaps?

<

Answer 1

You could add something like this to your .wpr class:

    display: flex;
    flex-flow: column wrap;
    max-height: 800px;

This is kinda hacky though and I think it does require a max-height. You could also look into a jquery plugin like https://isotope.metafizzy.co/layout-modes/masonry.html