4 элемента в колонке, если добавляется 5-ый, то он уходит в другую колонку

[yaparoff]

Элементы генерируются с помощью js. В колонке должно быть 4 элемента. Если добавляется 5-ый, то он уходит в другую колонку.
Как это реализовать?

http://skrinshoter.ru/s/010818/mKAyNKug?a

Edited August 1, 2018 by yaparoff

[mrnobody]

Я попробовал с использованием гридов, но не могу понять почему появляется горизонтальный скролл:

https://codepen.io/corvus-007/pen/jpzyXa?editors=1100

 

UPD.: поправил — заменил `grid-template-columns: repeat(2, 50%);` на `grid-template-columns: repeat(2, 1fr);`

[Switch74]

form-grid{gap: 20px 40px;} дает отступы, а элементы у вас на 100% без их учета это как width и padding  

Вопросы:
1. Как у вас реализованы колонки? Подозреваю, что это два блока.
2. В каких блоках находятся элементы и кнопка "Добавить фильтр"? В одном?
3. Как должно отображаться добавление девятого элемента, в какую колонку (если это возможно)?

могу предложить такой вариант:
у вас заранее определено два блока (колонки) 1 и 2
в каждой из них должна быть кнопка "Добавить фильтр"
по умолчанию они скрыты, если в колонке1 меньше 4 элементов, показываем "Добавить фильтр" в колонке1
иначе показываем "Добавить фильтр" в колонке2
естественно элемент добавляется в ту колонку в которой нажали "Добавить фильтр"

если фильтров может быть больше 8 и они должны идти по четыре в столбик слева направо и сверху вниз, то можно добавить в скрипт click по "Добавить фильтр" проверку заполнения блока и добавления нового с такой же кнопкой, а в заполненном блоке удалять эту кнопку

[yaparoff]

Решил этот вопрос с помощью флексбокса https://codepen.io/anon/pen/JBvPzO
Но осталась другая проблема: когда элементы уже не будут помещаться в контейнер, они должны перемещаться вниз, пока этого не происходит

http://skrinshoter.ru/s/020818/ZJ09c3aV