Как заставить css grid не пропускать строки?

Question

[HelpSophie]

Есть список из элементов трех типов, у каждого типа есть свой класс, тут нормально. Нужно, чтобы элементы одного типа попадали в свою колонку.
Пробовала решить это с помощью grid-column и соответствующий номер.
Но при таком раскладе почему-то пропускаются строки.

Песочница https://jsfiddle.net/chr27nub/

Как избавится от пропусков?

Должно получиться вот такое

Answer 1

[Арсений Матыцин]

Переставлять элементы нельзя, они прилетают с бэка в неизвестном порядке.

Прямо во время вывода и выводить их в свои места. Это явный двумерный массив. Который ты спокойно выведешь, как только поймешь, как с ним работать. Если быть точнее, двумерная проходка, к двумерному массиву можно и стоило бы привести для сортировки.

Приведу грубый пример на псевдокоде:

cols1 = []
cols2 = []
cols3 = []

for(i = 0; i < x; i++) { // Где x = размер самого большого массива
for(j = 0; j < 3; j++) { // Потому что колонок 3
if j == 0:
     print(cols1[i])
...

Естественно, надо предусмотреть пустые вхождения-заглушки, или заранее прописать классы для n+ элемента, чтобы они вставали в свою колонку, при это не фиксирую жестко их строку. Все элементарно.

Comments

[HelpSophie]

Спасибо.
Считала, что гриды это могут.
Ответ с гридами есть выше, если интересно.

Answer 2

[forspamonly2]

grid: auto-flow dense / repeat(3, 100px);

Comments

[HelpSophie]

Отлично, то чего я ждала. Спасибо большое!