css - 如何在列中分解 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 |

我的意思是，分成几列但尊重“垂直”字母顺序？此外，柱子的“高度”应与可用空间一样高。所以没有像上面那样固定 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>