Как произвольно разбить <ul> на columns?

ul {columns:3} 
 
li:nth-child(4), 
li:nth-child(6) { 
  -webkit-column-break-before: always; 
}

<ul> 
  <li class="list-item-1">List Item 1</li> 
  <li class="list-item-2">List Item 2</li> 
  <li class="list-item-3">List Item 3</li> 
  <li class="list-item-4">List Item 4</li> 
  <li class="list-item-5">List Item 5</li> 
  <li class="list-item-6">List Item 6</li> 
</ul>

let ul = document.getElementById('ul'); 
let li = ul.querySelectorAll('li'); 
 
let uls = [], lis = []; 
for( let i = 0; i < 3; i++ ){ 
  uls[i] = document.createElement('ul'); 
  lis[i] = document.createElement('li'); 
} // Создаю три новых li, чтобы добавить их к основному ul 
// И еще три ul, которые добавятся в созданные li 
 
let count = [3, 2, 1]; // Начальное распределение элементов 
for( let i = 6; i < li.length; i++ ){ 
  count[ i % 3 ]++; 
} // В случае добавления новых - сверху будет докидываться +1 элем, слева направо. 
console.log( JSON.stringify( count ) ); 
 
let sum = 0; 
for( let i = 0; i < count.length; i++ ){ 
  for( let j = sum; j < sum + count[i]; j++ ){ 
    uls[i].appendChild( li[j] ); 
  } // Все li в промежутке от sum до sum + count[i] — добавляются в созданные ul 
  sum += count[i]; 
} 
 
lis.forEach(function(e, i){ 
  e.appendChild( uls[i] ); // созданные ul пихаются в созданные li 
  ul.appendChild(e); // Созданные li пихаются в основной блок. 
});

#ul { 
  display: flex; 
} 
#ul > li { 
  padding: 0 25px; 
}

<ul id="ul"> 
  <li class="list-item-1">List Item 1</li> 
  <li class="list-item-2">List Item 2</li> 
  <li class="list-item-3">List Item 3</li> 
  <li class="list-item-4">List Item 4</li> 
  <li class="list-item-5">List Item 5</li> 
  <li class="list-item-6">List Item 6</li> 
  <li class="list-item-7">List Item 7</li> 
  <li class="list-item-8">List Item 8</li> 
  <li class="list-item-9">List Item 9</li> 
</ul>