Eu tenho uma lista de itens que eu quero encaixar em um espaço que é restrito verticalmente:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

Como não quero que a lista tenha mais que uma altura específica, mas estou livre para expandi-la horizontalmente, quero dividir a lista em colunas, assim:

One    Two     Three
Four   Five    Six

Ou, alternativamente (no meu caso, a ordem não é importante)

One    Three   Five
Two    Four    Six

A propriedade csscolumn-count permite dividir uma lista em colunas, mas aceita apenas um número fixo de colunas. Eu não sei o número de itens que vou ter (pode ir de 1 a mais de 40), então se eu definir o número de colunas para 3, qualquer lista com mais de 6 itens será muito alta, e Se houver apenas 4 itens, somente a primeira coluna terá dois itens e ficará irregular.

Então, idealmente eu precisaria de umrow-count propriedade, mas não existe. Eu acho que posso fazer isso em Javascript também, mas estou procurando uma solução somente CSS.

Eu tentei algo:float:left em todos osli coloca a lista em uma linha. Para dividi-lo em duas linhas, eu precisarianão Apliquefloat:left para o elemento N / 2. Eu não sei como fazer isso.

Eu também sei que posso fazer isso dividindo-o em múltiplosul, cada um com doisliefloat:left eles, mas eu gostaria de evitar mexer no HTML para algo inteiramente apresentacional.

Alguém tem uma solução para esse problema?

Editar: Acho que não fui claro em explicar minhas exigências. Eu quero que a lista seja ordenada em colunas sem saber quantos itens eu vou ter, epara que eu sempre tenha duas linhas.

Por exemplo, com 7 itens, quero ter:

One    Two     Three   Four
Five   Six     Seven

E com 3 itens:

One    Two
Three