在几列中列表列表，并在其高度不同时保持每列元素的数量等于

Question

i我只需要在3列中显示一个无序的列表，但没有垂直对齐。

有一种方法可以删除列表元素编号之间的差距。 2和没有。 5在此示例中？

我已经尝试了Flexbox，Float，Table，column和网格布局，但无法弄清楚，尽管看上去很简单。 JS解决方案也可以，但是我无法更改HTML输出。而且我不知道该项目的高度，所以我不需要带有固定像素值的解决方案。

如果有一个解决方案，以下排序也将是一个很好的头，但是我想我可能会在我得到一个起点之后弄清楚：

1 3 5
2 4

ul { 
  list-style-type: none; 
  padding: 0;
  color: white; 
  text-align:center;
}

.small { 
  height: 30px
}

.large {
  height: 200px
}

li {
  background:red;
}

li:nth-child(2n) { 
  background:blue;
}

ul {
  display: grid; 
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

<ul>
  <li class="large">1</li>
  <li class="small">2</li>
  <li class="small">3</li>
  <li class="small">4</li>
  <li class="small">5</li>
</ul>

鉴定结果：

您可以通过设置column-count: 3;

避免在列表项目中进行休息，并始终在项目之后折断：

Answer 1

ul {
  column-count: 3;

  list-style-type: none;
  padding: 0;
  color: white;
  text-align: center;
}

.small {
  height: 30px;
}

.large {
  height: 200px;
}

li {
  break-inside: avoid-column;

  background: red;
}

li:nth-child(2n) {
  break-after: column;

  background: blue;
}

<ul>
  <li class="large">1</li>
  <li class="small">2</li>
  <li class="small">3</li>
  <li class="small">4</li>
  <li class="small">5</li>
</ul>