Masonry full width item breaks the layout

Question

I'm using Masonry and am in a case where I need 1,2,3 or 4 columns elements (resp: 25, 50, 75 and 100%). As soon as one element is 100% width, Masonry does not seem to be able to fill the gaps before. It's not a grid-sizer related question, as there is a grid-sizer of 25%, so everything is calculable.

See this codepen: I'd like element 6 to be moved after 4 and before 5, but it does not want to fill the gap...

Try to change element with number 5 to 'grid-item--width2' (50%) and now element 6 is used to fill the gap between 4 and 5, but not with a 100% item.

See this pen

Stackoverflow refuses to post this question if I don't paste some code inside, so I just add the following for this reason:

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