html - 使用 CSS 指定列

Question

如何在不改变 html 标签顺序的情况下使用 CSS 将元素放入列中？

<ul>
  <li class="column-2">1</li>
  <li class="column-1">2</li>
  <li class="column-1">3</li>
  <li class="column-3">4</li>
  <li class="column-3">5</li>
</ul>

应该是这样的:

添加元素时，它们应该属于指定的列(俄罗斯方 block 样式)。

Answer 1

带有 grid-auto-flow: column; 的 CSS 网格达到了我想要的效果。

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: column;
}

.column-1 {
  grid-column-start: 1;
}

.column-2 {
  grid-column-start: 2;
}

.column-3 {
  grid-column-start: 3;
}

<div class="wrapper">
  <div class="column-2">1</div>
  <div class="column-1">2</div>
  <div class="column-1">3</div>
  <div class="column-3">4</div>
  <div class="column-3">5</div>
  <div class="column-1">6</div>
</div>