title: How to display a list in two rows?
body: <p>I have a list of items that I want to fit in a space that is constrained vertically:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;One&lt;/li&gt;
      &lt;li&gt;Two&lt;/li&gt;
      &lt;li&gt;Three&lt;/li&gt;
      &lt;li&gt;Four&lt;/li&gt;
      &lt;li&gt;Five&lt;/li&gt;
      &lt;li&gt;Six&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Since I don't want the list to have more than a specific height, but I'm free to expan it horizontally, I want to divide the list into columns, like this:</p>
  
  <pre><code>One    Two     Three
  Four   Five    Six
  </code></pre>
  
  <p>Or, alternatively (in my case order is not important)</p>
  
  <pre><code>One    Three   Five
  Two    Four    Six
  </code></pre>
  
  <p>The css property <code>column-count</code> allows to break a list into columns, but it only accepts a fixed number of columns. I don't know the number of items I am going to have (it can go from 1 to more than 40), so if I set the number of columns to 3, any list with more than 6 items will be too high, and if there is only 4 items, then only the first column will have two items and it will look uneven.</p>
  
  <p>So, ideally I would need a <code>row-count</code> property, but it doesn't exist. I guess I can do that in Javascript too but I'm looking for a CSS-only solution.</p>
  
  <p>I tried something: <code>float:left</code> on every <code>li</code> puts the list in one row. To break it into two rows, I would need to <em>not</em> apply <code>float:left</code> to the N/2 element. I don't know how to do that.</p>
  
  <p>I know also that I can do it by breaking it into multiple <code>ul</code>, each one with two <code>li</code>, and <code>float:left</code> them, but I would like to avoid messing the HTML for something entirely presentational.</p>
  
  <p>Does someone has a solution for this problem?</p>
  
  <p><strong>Edit:</strong> I think I have not been clear in explaining my requirements. I want the list to be sorted into columns without knowing how many items I'm going to have, and <em>so that I will always have two rows</em>.</p>
  
  <p>So for example with 7 items, I want to have:</p>
  
  <pre><code>One    Two     Three   Four
  Five   Six     Seven
  </code></pre>
  
  <p>And with 3 items:</p>
  
  <pre><code>One    Two
  Three  
  </code></pre>