Masonry JS with 50% and 100% width items not working

Issue

I'm developing a website with a page that has text on the left, then news cards in a column on the right. Some cards will be 100% width of the column, others 50% and I want them to be reordered by masonry to fill the possible gaps As you can see on this codepen, it does not work on the example from left part (with 100% - 50% elements), but works on the right with 50% - 25% elements.

I'd like that on the left part item 3 comes after 1 to fill the gap, but I don't know why it does not want to.

Codepen here

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
});

Any help very appreciated, thanks in advance

Solution

thansk @dantheman, the solution is dense grid layout. still weird masonry does not do that btw

Answered By - stebal