Item spacing can break

[JoshuaCrewe]

I have a situation where I want three columns but only two items are available. I am not sure if I am misunderstanding the settings or if this is a bug.

What I expect to happen

FlexMasonry.init('.grid', {
    responsive: true,
    /*
     * A list of how many columns should be shown at different responsive
     * breakpoints, defined by media queries.
     */
    breakpointCols: {
        'min-width: 960px': 3,
        'min-width: 600px': 2
    },
    numCols: 1
});

<div class="grid">
     <div class="card"><img src="https://source.unsplash.com/Imc-IoZDMXc" alt=""></div>
    <div class="card"><img src="https://source.unsplash.com/Imc-IoZDMXc" alt=""></div>
</div>

I expected this to produce a three column grid. If there were two items, each would be 33% wide with a 33% wide space on the right hand side.

What actually happens

The 33% space is distributed between the second item leaving uneven gaps.

Steps to reproduce

I have a pen https://codepen.io/venncreative/pen/XWramej which shows the bug.

[JoshuaCrewe]

I realised that the link to the pen I provided was not the right version and wasn't showing the bug at all! I have updated the pen which now shows what I am experiencing.

The crux of the issue is if 3 columns are desired but only two items supplied the layout doesn't work. The workaround it to make sure there are more than two items which is most likely the case but when it is client uploaded can't always rely on this.

[JoshuaCrewe]

@matthewdixon has just supplied me with a much more simple and elegant solution. align-content: flex-start; on the container.