У меня есть список с неизвестным количеством элементов, это может быть 10 или 100
Как вы уже заметили, Многостолбцовый макет CSS создаетжелаемый макет с чистым CSS - без необходимости заранее знать количество элементов в контейнере.
Это не относится к сеткам CSS - вам нужно знать заранее количество элементов в сетке вЧтобы рассчитать необходимое количество строк - это довольно большое ограничение.
Поэтому я бы предложил вам придерживаться многостолбцовой раскладки для вашей раскладки.
Предполагая, что вышеупомянутое ограничение в порядке - тогда вы можете создать макет с помощью css следующим образом:
(Примечание: @Ander уже ответил на это, но для этого стоит небольшое объяснение)
1) В контейнере сетки измените свойство grid-auto-flow на column - Это размещает элементы сетки вертикально, а не горизонтально (по умолчанию).
2) Когда вы знаете количество элементов, вы можете рассчитать количество строк, необходимое для создания сбалансированной сетки, следующим образом:
#rows = ceil( #items / #columns )
Таким образом, для 22 элементов - # row =ceil (22/3) = 8
ul {
display: grid;
grid-auto-flow: column; /* 1 */
grid-template-rows: repeat(8, 1fr); /* 2 */
}
Мы можем немного улучшить это решение с помощью SASS - чтобы получить более общее решение, которое вычисляет количество строк.(SASS имеет функцию ceil)
ul {
list-style: none;
padding: 0;
display:grid;
$num-items: 22;
$num-cols: 3;
$num-rows: ceil($num-items / $num-cols);
grid-template-columns: repeat($num-cols, 1fr);
grid-template-rows: repeat($num-rows, 1fr);
grid-auto-flow: column;
border: 5px solid gold;
}
FWIW: Вот альтернативное решение, которое использует селекторы nth-child без необходимостиизмените свойство grid-auto-flow.К сожалению, оно имеет то же ограничение, что # элементы должны быть известны заранее.
li:nth-child(-n + 24) {
grid-column: 3;
}
li:nth-child(-n + 16) {
grid-column: 2;
}
li:nth-child(-n + 8) {
grid-column: 1;
}