ozoro,
изменил скрипт и css
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Column Lists</title>
<meta name="description" content="">
<style>
.column-list-js{
padding: 0 10px;
border:1px solid #000;
display: flex;}
.column-list{flex: 1;
list-style: none}
</style>
</head>
<body>
<ul class="column-list-js">
<li>Пункт #1</li>
<li>Пункт #2</li>
<li>Пункт #3</li>
<li>Пункт #4</li>
<li>Пункт #5</li>
<li>Пункт #6</li>
<li>Пункт #7
<ul>
<li>Пункт #7.1</li>
<li>Пункт #7.2</li>
<li>Пункт #7.3</li>
<li>Пункт #7.4</li>
<li>Пункт #7.5</li>
<li>Пункт #7.6</li>
<li>Пункт #7.7</li>
<li>Пункт #7.8</li>
<li>Пункт #7.9</li>
</ul>
</li>
<li>Пункт #8
<ul>
<li>Пункт #8.1</li>
<li>Пункт #8.2</li>
<li>Пункт #8.3</li>
</ul>
</li>
<li>Пункт #9</li>
<li>Пункт #10</li>
<li>Пункт #11
<ul>
<li>Пункт #11.1</li>
<li>Пункт #11.2</li>
<li>Пункт #11.3</li>
<li>Пункт #11.4</li>
<li>Пункт #11.5</li>
<li>Пункт #11.6</li>
</ul>
</li>
<li>Пункт #12</li>
<li>Пункт #13</li>
<li>Пункт #14</li>
<li>Пункт #15</li>
<li>Пункт #16</li>
<li>Пункт #17</li>
<li>Пункт #18</li>
<li>Пункт #19</li>
<li>Пункт #20</li>
<li>Пункт #21</li>
<li>Пункт #22</li>
<li>Пункт #23</li>
<li>Пункт #24</li>
<li>Пункт #25</li>
<li>Пункт #26</li>
<li>Пункт #27</li>
<li>Пункт #28</li>
<li>Пункт #29</li>
<li>Пункт #30</li>
<li>Пункт #31</li>
<li>Пункт #32</li>
<li>Пункт #33</li>
<li>Пункт #34</li>
<li>Пункт #35</li>
<li>Пункт #37</li>
<li>Пункт #38</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
// jquery.columnlist.js
// @weblinc, @jsantell (c) 2012
;(function( $ ) {
$.fn.columnlist = function ( options ) {
options = $.extend( {}, $.fn.columnlist.defaults, options );
return this.each(function () {
var
$list = $( this ),
size = options.size || $list.data( 'columnList' ) || 1,
$children = $list.children( 'li' ),
lis = $list.find( 'li' ),
$length = lis.length ,
$column = [],
num = 0,
k = 0;
$children.each(function(i, li) {
var len = $('li', li).length + 1;
k += len;
if(k >= $length / size) {
$column[num] = i;
++num;
--size;
$length -= k;
k = 0;
}
else $column[num] = i;
});
k = 0;
$column.forEach(function(n, i) {
$li = returnColumn( i );
$ul = $('<ul />').appendTo($li);
num = $children.slice(k, n + 1);
k = n + 1;
num.appendTo($ul);
$list.append($li)
})
});
function returnColumn ( inc ) {
return $('<li class="' + options.incrementClass + inc + ' ' + options[ 'class' ] + '"></li>');
}
};
$.fn.columnlist.defaults = {
'class' : 'column-list',
incrementClass : 'column-list-'
};
})( jQuery );
// настройки
$('ul.column-list-js').columnlist({
size : 3,
'class' : 'column-list',
incrementClass : 'column-listxxx-'
});
</script>
</body>
</html>