Как с помощью CSS GRID задать порядок элементов в колонках?

Question

[weranda]

Приветствую.

Есть вот такой HTML и в нем три колонки. Элементы должны быть расположены в колонках не «слева направо и продолжаться в следующей строке», а «сверху вниз и продолжаться в следующей колонке». Как это сделать?



P. S.
Элементов может быть любое количетсво.

Answer 1

[DivineDraft]

Особо не силен по grid, но похоже код выше не работает из-за того, что не установленное кол-во строк.
Если вы обладаете информацией о кол-ве выводимой информации, то просто установите в следующей строке статичное число:
grid-template-rows: repeat(6, 1fr);

Если таковых данных нет, то так же добавил небольшой скрипт на jquery, который производит расчеты автоматически

Comments

[weranda]

Ищу вариант без JS. Почему так? — Хочется знать, есть ли такая возможность!

[DivineDraft]

weranda, не могу сказать точно, но кажись проблема следует из теории по grid.

Вы хотите отображать данные колонками. За это отвечает свойство и значение: grid-auto-flow: column;
В теории сказано:

column - Ключевое слово, которое указывает, что алгоритм автоматического размещения размещает элементы, заполняя каждый столбец по очереди, добавляя новые столбцы по мере необходимости.

Мера необходимости возникает сразу, если мы не указываем кол-во строк и колонки создаются друг за другом:


Но мы ведь хотим видеть таблицу, следовательно нужны строки, укажем нужное кол-во:

Как видим выше - все прекрасно, когда мы обладаем информацией о кол-ве колонок и кол-во строк для построения сетки по необходимости.

Если же вдруг мы не обладаем информацией о кол-ве строк, то будет следующее:

Создаются новые колонки по мере необходимости, при это они не учитывают указанное раннее кол-во

[weranda]

DivineDraft, это я понял, я не понял вот что: можно ли без JS и указания количества строк сделать так, как требуется в вопросе?!