Depending on width, item moves out of desired position leaving empty slot

[mikecabana]

I have set up Muuri for a responsive layout. Depending on the width of the layout sometimes items will move out of a desired position leaving an empty slot. Here is my config.

{
    items: [ ... ],
    dragEnabled: true,
    dragPlaceholder: {
        enabled: true,
    },
    layout: {
        fillGaps: true,
        rounding: false,
    },
    layoutOnResize: true,
    layoutOnInit: true,
    sortData: {
        order: (item, element) => {
            return parseFloat(element.getAttribute('data-order'));
        },
    },
}

Here's a video of my project showing this issue.

https://user-images.githubusercontent.com/1682519/114902613-fba58d80-9de3-11eb-9aae-699e078dae7c.mp4

And here's a codepen

https://codepen.io/mcabana/pen/rNjKmxZ

[niklasramo]

@mikecabana To my eyes that looks like the intended behavior, but of course that may not be the desired behavior in some cases. Here's some explanation of the default algorithm: https://github.com/haltu/muuri/issues/264. You can of course create your own algorithm and position the items with any logic you wish :)

[mikecabana]

Thanks for the response @niklasramo! Ok I figured that was the case ha. I'll look into creating my own. Would you have any hints as to how I might get that little card to stay on the left with a custom algorithm?