How can I create multi columns from a single unordered list?

Question

I'd like to create a multi column list like this: https://jsfiddle.net/37dfwf4u/

No problem when using a different list for each column:

<ul>     <li>item1</li>     <li>item2</li>     <li>item3</li>     <li>item4</li> </ul> <ul>     <li>item5</li>     <li>item6</li>     <li>item7</li>     <li>item8</li> </ul> 

ul {     display:inline-block; } 

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?

Answer 1

Yes, you can create a multi column list as described if you make the ul a flex container, change the flex-direction to column, allow it to wrap by applying flex-wrap: wrap and additionally force it to wrap by limiting its height:

ul {   height: 100px;   display: flex;   flex-direction: column;   flex-wrap: wrap; }

<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>   <li>item 7</li>   <li>item 8</li>   <li>item 9</li>   <li>item 10</li>   <li>item 11</li>   <li>item 12</li>   <li>item 13</li>   <li>item 14</li>   <li>item 15</li>   <li>item 16</li>   <li>item 17</li>   <li>item 18 </li>   <li>item 19</li>   <li>item 20</li>   <li>item 21</li> </ul>

Here's another possibility, added half a year later after the comment by @Andrew Koper:

You can also use the colummn-count parameter, which doesn't require a fixed height (and also not flex), but defines a fixed number of columns. So in the example below, even just two list items would be broken into two columns of one list item each:

ul {   column-count: 2; }

<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>   <li>item 7</li>   <li>item 8</li>   <li>item 9</li>   <li>item 10</li>   <li>item 11</li>   <li>item 12</li>   <li>item 13</li>   <li>item 14</li>   <li>item 15</li>   <li>item 16</li>   <li>item 17</li>   <li>item 18 </li>   <li>item 19</li>   <li>item 20</li>   <li>item 21</li> </ul>