JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="split-list">
  <li>リスト 1</li>
  <li>リスト 2</li>
  <li>リスト 3</li>
  <li>リスト 4</li>
  <li>リスト 5</li>
  <li>リスト 6</li>
  <li>リスト 7</li>
  <li>リスト 8</li>
  <li>リスト 9</li>
  <li>リスト 10</li>
  <li>リスト 11</li>
  <li>リスト 12</li>
</ul>

CSS

.split-list ul{
  float: left;
  margin-left: 3px;
}
.split-list li{
  padding-right: 10px;
 }

JavaScript

$(function($) {
    var num_cols = 3,
    container = $('.split-list'),
    listItem = 'li',
    listClass = 'sub-list';
    container.each(function() {
        var items_per_col = new Array(),
        items = $(this).find(listItem),
        min_items_per_col = Math.floor(items.length / num_cols),
        difference = items.length - (min_items_per_col * num_cols);
        for (var i = 0; i < num_cols; i++) {
            if (i < difference) {
                items_per_col[i] = min_items_per_col + 1;
            } else {
                items_per_col[i] = min_items_per_col;
            }
        }
        for (var i = 0; i < num_cols; i++) {
            $(this).append($('<ul ></ul>').addClass(listClass));
            for (var j = 0; j < items_per_col[i]; j++) {
                var pointer = 0;
                for (var k = 0; k < i; k++) {
                    pointer += items_per_col[k];
                }
                $(this).find('.' + listClass).last().append(items[j + pointer]);
            }
        }
    });
});