HelpSophie
@HelpSophie

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

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

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

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

Должно получиться вот такое
5ecaf5b81c075732194248.png
  • Вопрос задан
  • 143 просмотра
Решения вопроса 2
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель
Переставлять элементы нельзя, они прилетают с бэка в неизвестном порядке.


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

Приведу грубый пример на псевдокоде:
cols1 = []
cols2 = []
cols3 = []

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


Естественно, надо предусмотреть пустые вхождения-заглушки, или заранее прописать классы для n+ элемента, чтобы они вставали в свою колонку, при это не фиксирую жестко их строку. Все элементарно.
Ответ написан
@forspamonly2
grid: auto-flow dense / repeat(3, 100px);

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы