如何打破列中的 html 列表，在列方向上遵循字母顺序？

Question

如果我有这样的列表怎么办：

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

想要这样的效果图：

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

我的意思是，分成几列但遵守 'vertical' 字母顺序？此外，可用的列数应为 'tall' 和 space。所以不像上面那样固定 4 行。也不是固定高度的容器。

可能吗？我知道我可以用 flexbox 来做，但是固定了容器的高度。我也查看了网格规范，但不确定是否可行。

有什么想法吗？

Answer 1

像这样尝试 CSS 网格：

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>

Answer 2

您还可以将 column-count 与 column-fill: auto 一起使用。这样就可以达到不填的效果。

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>

如何打破列中的 html 列表，在列方向上遵循字母顺序？

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

css

flexbox

multiple-columns

css-grid

css-multicolumn-layout