Как обернуть сетку CSS как в столбец, так и в определенное количество строк, соблюдая логический алфавитный порядок? ⇐ CSS

[Anonymous]

Итак, у меня есть такая настройка сетки

Код: Выделить всё

a
b
c
d
e
f
...
z

Как я могу сделать так, чтобы он отображался в двух столбцах, сгруппированных в строки высотой, скажем, 4. Создание такой аранжировки:

Код: Выделить всё

a | e
b | f
c | g
d | h
-----
i | m
j | n

...

s | w
t | x
-----
y |
z |

Без очевидного ответа на вопрос о группировке 4 или 8 элементов div в отдельный блок сетки.
Реализации, отличающиеся от использования элементов div, также приветствуются
В настоящее время у меня это работает частично, за исключением сортировки по алфавиту с помощью

Код: Выделить всё

.grid-container {
display: grid;
grid-template-columns: repeat(2, 150px);
grid-template-rows: repeat(4, auto);
}

.grid-container DIV:nth-child(8n) {
padding-bottom: 10px;
}

Но это не соблюдает алфавитный порядок, давая следующее:

Код: Выделить всё

a | b
c | d
e | f
g | h
-----
i | j

Добавление

Код: Выделить всё

grid-auto-flow: column;

в контейнер добавляет дополнительные столбцы при переполнении, игнорируя определенные два столбца.


Подробнее здесь: https://stackoverflow.com/questions/790 ... ile-follow