title: Divide list into two columns
body: <p>I'm trying to build an unordered list something like this:</p>
  
  <pre><code> - Item 1     |    - Item 4
   - Item 2     |    - Item 5
   - Item 3     |    - Item 6
  </code></pre>
  
  <p>I have this HTML:</p>
  
  <pre><code> &lt;div class="multi-column"&gt;
      &lt;ul&gt;
         &lt;li&gt;Item 1&lt;/li&gt;
         &lt;li&gt;Item 2&lt;/li&gt;
         &lt;li&gt;Item 3&lt;/li&gt;
         &lt;li&gt;Item 4&lt;/li&gt;
         &lt;li&gt;Item 5&lt;/li&gt;
         &lt;li&gt;Item 6&lt;/li&gt;
      &lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>and this CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>I also tried to use the <em>balance</em> value in the column-fill property, but it didn't work.</p>
  
  <p>What am I missing here?</p>