各位好，我现在遇到一个布局难题：我需要把无序列表分成3列展示，但不需要垂直对齐——具体来说，就是要消除示例里第2个和第5个列表项之间的空隙。

我已经试了各种布局方式：flexbox、浮动、表格、多列布局还有网格布局，看起来挺简单的问题，但就是找不到合适的解法。另外有几个限制条件：我没法修改HTML的输出结构，也不知道每个列表项的高度，所以固定像素值的方案肯定行不通。用JavaScript来解决也是可以接受的。

对了，如果能实现下面这种排序方式就更棒了，不过这个算是额外的小需求，等我找到核心问题的思路应该自己能搞定：

1 3 5
2 4

先给大家看看我现在的代码：

CSS 代码 #

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));
}

HTML 代码 #

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

我想要的最终效果是这样的：

重要提醒：这不是关于纯CSS瀑布流布局的问题！在常见的瀑布流方案里，第4个元素会跑到第二行，因为瀑布流的目标是让各列的高度尽量均等。而我的需求是让每列的元素数量尽量一致（直到没有剩余元素），我试过那种瀑布流方案，确实不符合我的需求。

备注：内容来源于stack exchange，提问作者Setyl