How to Display an Unordered List in Two Columns

How to display an unordered list in two columns?

Modern Browsers

leverage the css3 columns module to support what you are looking for.

http://www.w3schools.com/cssref/css3_pr_columns.asp

CSS:

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

http://jsfiddle.net/HP85j/8/

Legacy Browsers

Unfortunately for IE support you will need a code solution that involves JavaScript and dom manipulation. This means that anytime the contents of the list changes you will need to perform the operation for reordering the list into columns and reprinting. The solution below uses jQuery for brevity.

http://jsfiddle.net/HP85j/19/

HTML:

<div>
    <ul class="columns" data-columns="2">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
    </ul>
</div>

JavaScript:

(function($){
    var initialContainer = $('.columns'),
        columnItems = $('.columns li'),
        columns = null,
        column = 1; // account for initial column
    function updateColumns(){
        column = 0;
        columnItems.each(function(idx, el){
            if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){
                column += 1;
            }
            $(columns.get(column)).append(el);
        });
    }
    function setupColumns(){
        columnItems.detach();
        while (column++ < initialContainer.data('columns')){
            initialContainer.clone().insertBefore(initialContainer);
            column++;
        }
        columns = $('.columns');
    }

    $(function(){
        setupColumns();
        updateColumns();
    });
})(jQuery);

CSS:

.columns{
    float: left;
    position: relative;
    margin-right: 20px;
}

EDIT:

As pointed out below this will order the columns as follows:

A  E
B  F
C  G
D

while the OP asked for a variant matching the following:

A  B
C  D
E  F
G

To accomplish the variant you simply change the code to the following:

function updateColumns(){
    column = 0;
    columnItems.each(function(idx, el){
        if (column > columns.length){
            column = 0;
        }
        $(columns.get(column)).append(el);
        column += 1;
    });
}

How can I create multi columns from a single unordered list?

Yes, you can create a multi column list as described if you make the ul a flex container, change the flex-direction to column, allow it to wrap by applying flex-wrap: wrap and additionally force it to wrap by limiting its height:

ul {
  height: 100px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

<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>
  <li>item 11</li>
  <li>item 12</li>
  <li>item 13</li>
  <li>item 14</li>
  <li>item 15</li>
  <li>item 16</li>
  <li>item 17</li>
  <li>item 18 </li>
  <li>item 19</li>
  <li>item 20</li>
  <li>item 21</li>
</ul>

h3 {
  padding-top: 20px;
}

.phrases {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background-color: #ccc; /* For demo purposes */
    width: 650px;
    padding: 0;
}

.phrases li {
    list-style-type: none;
    display: inline;
}

.phrases li:nth-of-type(2n+1) {
    background-color: beige; /* For demo purposes */
}

.phrases li:nth-of-type(2n):after {
    content: "\A";
    white-space: pre; 
}

<h3>Phrases</h3>
<ul class="phrases">
  <li>O beautiful for spacious skies</li>
  <li>For amber waves of grain</li>
  <li>For purple mountain majesties</li>
  <li>Above the fruited plain!</li>
  <li>America! America</li>
  <li>God shed His grace on thee</li>
  <li>And crown thy good with brotherhood</li>
  <li>From sea to shining sea!</li>
</ul>

div#multiColumn {  -moz-column-count: 2;  -moz-column-gap: 20px;  -webkit-column-count: 2;  -webkit-column-gap: 20px;  column-count: 2;  column-gap: 20px;}
#multiColumn li:nth-child(8) {  -webkit-column-break-after: always;  break-after: always;}

<div id="multiColumn">  <ul>    <li>List Item1</li>    <li>List Item2</li>    <li>List Item3</li>    <li>List Item4</li>    <li>List Item5</li>    <li>List Item6</li>    <li>List Item7</li>    <li>List Item8</li>    <li>List Item9</li>    <li>List Item10</li>  </ul></div>

ul ul  {  page-break-inside: avoid;}

<ul style="columns: 2;">  <li>Category 1</li>  <ul>    <li>Skill 1.1</li>    <li>Skill 1.2</li>    <li>Skill 1.3</li>  </ul>  <li>Category 2</li>  <ul>    <li>Skill 2.1</li>    <li>Skill 2.2</li>  </ul>  <li>Category 3</li>  <ul>    <li>Skill 3.1</li>  </ul>  <li>Category 4</li>  <ul>    <li>Skill 4.1</li>    <li>Skill 4.2</li>  </ul></ul>

.column-stack {        display: -ms-flexbox;        display: flex;        -ms-flex-pack: justify;        justify-content: space-between;    }
    .column-stack ul {        flex-grow: 1;        flex-basis: 1px;    }
.headers {    display:flex;  } .column-header {        font-size: 12px;        text-transform: uppercase;        color: #006a4d;        font-weight: 500;        padding-bottom: 5px;        border-bottom: 1px solid #3a3a3a;        display: flex;        align-items: stretch; /* Default */        justify-content: space-between;        flex-grow: 1;        flex-basis: 1px;        margin: 10px; } 

<div class="headers">  <div class="column-header">Header 1 One Line</div>  <div class="column-header">Header 2 Many Lines of Text this is many lines of text and is the longest column wow it keeps going and going and going like the energizer rabbit</div>  <div class="column-header">Header 3 Two Line at most on most use cases</div></div>
<div class="column-stack"><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul></div>

<ul class="two-col-special">
    <li>First Category</li>
    <li>Second Category</li>
    <li>Third Category</li>
    <li>Fourth Category</li>
    <li>Fifth Category</li>
</ul>

.two-col-special {
    border: 1px dotted blue;
    overflow: auto;
    margin: 0;
    padding: 0;
}

.two-col-special li {
    display: inline-block;
    width: 45%;
    margin: 0;
    padding: 0;
    vertical-align: top; /* In case multi-word categories form two lines */
}
.two-col-special li:before {
    content: '+';
    padding: 5px;
    margin-right: 5px; /* you can tweak the gap */
    color: orange;
    background-color: white; /* in case you want a color... */
    display: inline-block;
}