Divide list into two columns

I'm trying to build an unordered list something like this:

 - Item 1     |    - Item 4
 - Item 2     |    - Item 5
 - Item 3     |    - Item 6

I have this HTML:

 <div class="multi-column">
    <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>
    </ul>
 </div>

and this CSS:

.multi-column {
   -moz-column-count: 2;
   -moz-column-gap: 20px;
   -moz-column-fill: auto;
   -webkit-column-count: 2;
   -webkit-column-gap: 20px;
   -webkit-column-fill: auto;
   column-count: 2;
   column-gap: 20px;
   column-fill: auto;
}

It builds the two columns as it's supposed to, but it puts 4 items in the left side and 2 in the right side (4x2). What I wanted is 3 x 3.

I also tried to use the balance value in the column-fill property, but it didn't work.

What am I missing here?