title: How can I create multi columns from a single unordered list?
body: <p>I'd like to create a multi column list like this:
  <a href="https://jsfiddle.net/37dfwf4u/" rel="noreferrer">https://jsfiddle.net/37dfwf4u/</a></p>
  
  <p>No problem when using a different list for each column:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;item1&lt;/li&gt;
      &lt;li&gt;item2&lt;/li&gt;
      &lt;li&gt;item3&lt;/li&gt;
      &lt;li&gt;item4&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
      &lt;li&gt;item5&lt;/li&gt;
      &lt;li&gt;item6&lt;/li&gt;
      &lt;li&gt;item7&lt;/li&gt;
      &lt;li&gt;item8&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>ul {
      display:inline-block;
  }
  </code></pre>
  
  <p>However, can this be done by a continuous list and pure CSS so that the CSS arranges the columns automatically?
  E.g. by use of flex layout which I'm not yet familiar with?</p>