jquery - 2 列 UL LI，但一列包含的 LI 多于另一列

Question

我有一个 UL LI 列表并显示在 2 列内。第一列中有 5 个元素，第二列中有 5 个元素，看起来不错。

问题:我需要在第一列中显示 8 个元素，在第二列中显示 2 个元素。我尝试了一些方法，但没有达到预期效果。

我应该让 Jquery 参与进来才能让它工作吗？请帮忙。

jsfiddle

div#multiColumn {
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  column-count: 2;
  column-gap: 20px;
}

<div id="multiColumn">
  <ul>
    <li>List Item1</li>
    <li>List Item2</li>
    <li>List Item3</li>
    <li>List Item4</li>
    <li>List Item5</li>
    <li>List Item6</li>
    <li>List Item7</li>
    <li>List Item8</li>
    <li>List Item9</li>
    <li>List Item10</li>
  </ul>
</div>

Answer 1

CSS-Grid 可以做到这一点:

div#multiColumn ul {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(8, auto);
  grid-auto-flow: column;
}

<div id="multiColumn">
  <ul>
    <li>List Item1</li>
    <li>List Item2</li>
    <li>List Item3</li>
    <li>List Item4</li>
    <li>List Item5</li>
    <li>List Item6</li>
    <li>List Item7</li>
    <li>List Item8</li>
    <li>List Item9</li>
    <li>List Item10</li>
  </ul>
</div>