Переместить элементы li во второй столбец - только CSS

Question

У меня есть список UL и LI, а максимальный номер элемента равен 10, и я пытаюсь переместить элементы, если число столбца превышает 5, и мне нужно обрабатывать только с помощью CSS, я попытался с помощью CSS3 «Столбец»но он идет во второй столбец со всеми элементами, как мне убедиться, что элементы больше, чем 5, во второй столбец

Проблема в том, что LI должен отображаться во втором столбце, только если больше 5 li и если li5 или меньше, чем это должно быть один столбец

.listItems {
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}
.listItems li {
  color: #000;
  text-decoration: none;
  display: block;
  padding: 4px 0;
}

<ul role="menu" class="listItems">
  <li><a href="javascript;;">List Item 1</a></li>
  <li><a href="javascript;;">List Item 2</a></li>
  <li><a href="javascript;;">List Item 3</a></li>
  <li><a href="javascript;;">List Item 4</a></li>
  <li><a href="javascript;;">List Item 5</a></li>
  <li><a href="javascript;;">List Item 6</a></li>
  <li><a href="javascript;;">List Item 7</a></li>
  <li><a href="javascript;;">List Item 8</a></li>
  <li><a href="javascript;;">List Item 9</a></li>
  <li><a href="javascript;;">List Item 10</a></li>
</ul>

Answer 1

CSS-Grid может справиться с этим за вас.Просто определите желаемое количество строк и установите направление потока на column.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

ul {
  list-style: none;
  display: inline-grid;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  border: 1px solid grey;
}

li {
  padding: .25em;
}

<ul role="menu" class="listItems">
  <li><a href="javascript;;">List Item 1</a></li>
  <li><a href="javascript;;">List Item 2</a></li>
  <li><a href="javascript;;">List Item 3</a></li>
  <li><a href="javascript;;">List Item 4</a></li>
</ul>

<ul role="menu" class="listItems">
  <li><a href="javascript;;">List Item 1</a></li>
  <li><a href="javascript;;">List Item 2</a></li>
  <li><a href="javascript;;">List Item 3</a></li>
  <li><a href="javascript;;">List Item 4</a></li>
  <li><a href="javascript;;">List Item 5</a></li>
  <li><a href="javascript;;">List Item 6</a></li>
  <li><a href="javascript;;">List Item 7</a></li>
  <li><a href="javascript;;">List Item 8</a></li>
  <li><a href="javascript;;">List Item 9</a></li>
  <li><a href="javascript;;">List Item 10</a></li>
</ul>

Answer 2

Можно считать flexbox и направление столбца с максимальной высотой, равной высоте 5 элементов:

.listItems {
  list-style: none;
  margin: 0;
  padding: 0;
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  max-height:calc((1.2em + 8px)*5);
  border:1px solid;
  margin:5px;
}
.listItems li {
  color: #000;
  text-decoration: none;
  display: block;
  padding: 4px 0;
  line-height:1.2em;
}

<ul role="menu" class="listItems">
  <li><a href="javascript;;">List Item 1</a></li>
  <li><a href="javascript;;">List Item 2</a></li>
  <li><a href="javascript;;">List Item 3</a></li>
  <li><a href="javascript;;">List Item 4</a></li>
</ul>
<ul role="menu" class="listItems">
  <li><a href="javascript;;">List Item 1</a></li>
  <li><a href="javascript;;">List Item 2</a></li>
  <li><a href="javascript;;">List Item 3</a></li>
  <li><a href="javascript;;">List Item 4</a></li>
  <li><a href="javascript;;">List Item 5</a></li>
  <li><a href="javascript;;">List Item 6</a></li>
  <li><a href="javascript;;">List Item 7</a></li>
  <li><a href="javascript;;">List Item 8</a></li>
</ul>