JSFiddle - React, Tailwind, and code Playground

by Alexandre Simoes

HTML

<div class="nav">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
  </ul>
</div>

CSS

.nav ul  {
  
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav ul li {
  
}

JavaScript

(function ($) {
 
    $.fn.colsplit = function(options) {
        var settings = $.extend({
          cols: 1,
          rows: this.length
        }, options );
 
        return this.each(function(idx, item){
        	var $this = $(item),
          		result = [],
          		items = $this.children('li');
          
          for(var c=0;c<settings.cols;c++){
          	var $col = $('<ul></ul>'),
            		colItems = items.splice(0, settings.rows);

            $col
            	.append(colItems)	// add computed column
              .width(Math.floor(100 / settings.cols) + '%') // set the col width
              .css('float', 'left');	// make them side by side
              
            result.push($col);	// add column to the result
          }
          
          $this.html(result);
        });
 
    };
 
}( jQuery ));



// do it! :)
$('ul').colsplit({cols: 2, rows: 6});