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?

If you don't want to specify a container height upfront, then please explain what determines the "space available" then. — CBroe, Feb 02 '22 at 13:45
"Pages" are by default as high as their content demands, on the web. If you are talking about _anything else_, then please be precise. — CBroe, Feb 02 '22 at 13:52

score 1 · Accepted Answer · answered Feb 02 '22 at 13:55

Try CSS grid like this:

ul {
  margin: 0;
  padding: 0;
  list-style:none;
  height: 100vh;
  display: grid;
  grid-template-rows: repeat(auto-fit, 1.2em); /* define the heoght of one row here */
  grid-auto-flow: column;
  font-size: 50px;
}

body {
  margin: 0;
}

<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>

score 1 · Answer 2 · answered Feb 02 '22 at 14:18

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>

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

2 Answers2