Фильтрация блоков, как это сделать?

Question

[UncleMisha]

Я использую простой фильтр взятый отсюда. Там можно посмотреть демо. Если в линию то работает все ок, но когда я создаю колонки то происходит вот так:

А нужно что бы все шло по порядку, вот так:

Понимаю что в JS нужно прописать, что бы по фильтрации у тех которые не нужны включался "display: none;" как это реализовать? Или нужно что то другое? "Я очень плохо понимаю JS пожалуйста пишите код целиком" заранее всем благодарен.
Вот JS который у меня:

$(function() {

	var newSelection = "";
	
	$("#flavor-nav a").click(function(){

		$("#flavor-nav a").removeClass("current");
		$(this).addClass("current");
		
		newSelection = $(this).attr("rel");
		
		$(".flavor").not("."+newSelection).slideUp();
		$("."+newSelection).slideDown();
	});
	
});

Answer 1

[Антон Усачев]

Есть плагины для этого поновее и попрямее. Что удобно, работает и с гридами и с флексами. Настройка простая.

Comments

[UncleMisha]

Я очень плохо понимаю JS и с MixItUp я работать не могу :) У меня не получается.

[Антон Усачев]

UncleMisha, все равно, как минимум, нам нужен цсс-код. Очевидно, что блоки ползут по ширине. Это может быть марджин на nth-child, например, или еще что-то, что мешает им встать нормально даже при том, что часть блоков display: none.

[UncleMisha]

Антон Усачев, Вот: https://codepen.io/mihail-kozlow/pen/RzZbyJ

[Антон Усачев]

UncleMisha, https://codepen.io/rockfeeler/pen/XLaWrR

[UncleMisha]

Антон Усачев, Спасибо, помогло!