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>

Answer 2

Используйте break-after: always; на 8-м li элементе:

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

#multiColumn li:nth-child(8) {
  -webkit-column-break-after: always;
  break-after: always;
}

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

Вы можете добиться того же, используя дисплей Flex, с Flex Wrap. При условии, что вы должны установить высоту элемента ul.

Преимущество этого подхода заключается в том, что вы можете иметь отзывчивую высоту, если требуется, и можете переносить ее на любое количество столбцов в зависимости от ширины элементов.

См. Фрагмент кода ниже.

div#multiColumn ul{
 display:flex;
 flex-direction: column;
 flex-wrap: wrap;
 height:160px;
}

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