定位菜单，菜单项自动相互分开，分为两行

Question

对于移动网站，我需要一个构造来获得如下结果。 我们使用CMS，因此我获得了一些自动生成的HTML。

<ul>
<li>
    <a href="#">Main item 1</a>
    <ul>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
    </ul>
</li>
<li>
    <a href="#">Main item 2</a>
    <ul>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
    </ul>
</li>
<li>
    <a href="#">Main item 3</a>
    <ul>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
    </ul>
</li>

使项目浮动或显示内联块并不能解决问题。

是否可以使用此HTML执行此操作，还是创建两列并将菜单项分散到每列？

我创建了一个CodePen：CodePen

Answer 1

如果你希望它尽可能节省空间，我会使用一个砌体库。

这是一个示例库： https://github.com/desandro/masonry