Multiple column lists from one <ul>, CSS and maybe a bit of JS

Question

Look at my HTML code (let's say I have 100's of links in this manner):

<-- language: lang-html -->

<ul>
    <li><a href="/link.html">Link1</a></li>
    <li><a href="/link.html">Link2</a></li>
    <li><a href="/link.html">Link3</a></li>
    <li><a href="/link.html">Link4</a></li>
    <li><a href="/link.html">Link5</a></li>
    <li><a href="/link.html">Link6</a></li>
    <li><a href="/link.html">Link7</a></li>
    <li><a href="/link.html">Link8</a></li>
    <li><a href="/link.html">Link9</a></li>
    <li><a href="/link.html">Link10</a></li>
</ul>

As you see it's one <ul> with many <li> inside.

I would like this to look like this on page (5 columns):

Link1  Link3  Link5  Link7  Link9
Link2  Link4  Link6  Link8  Link10

This URL has something similar explained: http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/ however it causes different positioning of the links, instead of listing going down, it goes to the right, so the links end up looking like this:

Link1  Link2  Link3  Link4  Link5
Link6  Link7  Link8  Link9  Link10

I am not using any JavaScript framework on site, so I would like to have this done with only CSS and just a little of framework independent JavaScript. Any solutions for this?

Answer 1

The column-count property

To get the effect you are after, you can use column-count: <number>:

The column-count CSS property describes the number of columns of the element.

<number> Is a strictly positive integer describing the ideal number of columns into which the content of the element will be flowed. If the column-width is also set to a non-auto value, it merely indicates the maximum allowed number of columns.

How the columns display is highly customizable, you can also configure column properties using: column-width, column-gap, column-rule, column-rule-width, column-rule-style, column-rule-color, column-span, column-fill, columns (see above linked MDN article)

Demo

ul {
  -webkit-column-count: 5;
  column-count: 5;
}

<ul>
  <li><a href="/link.html">Link1</a>
  </li>
  <li><a href="/link.html">Link2</a>
  </li>
  <li><a href="/link.html">Link3</a>
  </li>
  <li><a href="/link.html">Link4</a>
  </li>
  <li><a href="/link.html">Link5</a>
  </li>
  <li><a href="/link.html">Link6</a>
  </li>
  <li><a href="/link.html">Link7</a>
  </li>
  <li><a href="/link.html">Link8</a>
  </li>
  <li><a href="/link.html">Link9</a>
  </li>
  <li><a href="/link.html">Link10</a>
  </li>
</ul>

Answer 2

how about using flex-wrap?

ul{
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
}

li{
    width: 20%;
}