How do I break html lists in columns, honoring alphabetical order in column direction?

Question

what if I have a list like this:

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
  <li>h</li>
  <li>i</li>
</ul>

And want a rendering like this:

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

I mean, broken into columns but honoring 'vertical' alphabetical order? Also, columns should be as 'tall' as the space available. So not fixed 4 rows like above. Nor fixed height container.

Is it possible? I know I can do it with flexbox but fixeng the container height. I took a look to grid specs too, but not sure if it's some way possible.

Any idea?

Answer 1

You can also use column-count with column-fill: auto. This way you'll get the desired effect of not filling out.

ul.example {
  column-count: 3;
  column-rule: 1px solid #dadbe1;
  column-gap: 3.7rem;
  column-fill: auto; /*balance*/
  column-rule-color: #eaeaf1;
  column-width: auto;
  display: inline-block;
  height: 100vh; /*auto*/
  margin: 0;
  padding: 0;
  width: 100%;
}

ul.example li { list-style: none; display: block; position: relative; break-inside: avoid; height: 25vh; }

<ul class="example">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
        <li>f</li>
        <li>g</li>
        <li>h</li>
        <li>i</li>
      </ul>