Почему packery Не позволяет менять местами айтем по клику?

Question

[GaserV]

Добрый день! Подскажите пожалуйста. Получается при клике - айтем увеличивается. Но у меня фикс. ширина и высота враппера. По умолчанию у четвертого айтема класс main, т.е. увеличенный. Всего айтемов - 10. И получается такая ситуация. Если кликать на айтемы до 8 - то все ровненько меняется. Если на 8,9,10 до то , айтемы не занимают свободное пространство справа или слева. Я решил вставить например последний айтем, при клике на него, после 6-го, чтобы все ровно было. Он вставляется, но отображается снизу. Почему так?

Сайт - elinadesign.ru/synergy

var $grid = $('.grid').packery({
		itemSelector: '.grid-item',
		gutter: 5
	})

	$grid.on( 'click', '.grid-item', function( event ) {
	  
	  var items = $('.grid-item'),
	  	  item = $(this), 
	  	  itemIndex = items.index(this);

	  if (itemIndex == 9) {
	  	items.eq(5).after($('.grid-item').eq($(this).index()))
	  }

	  items.removeClass('main')
	  item.addClass('main');

	  $grid.packery('layout');
	});