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?

Sestertium

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>

Klondike

This seems to be a fine solution. Completely self-adjusting, no number of columns need to be defined, no additional elements, just a continuos list. – Sestertium

BTW: How can I make such inline demo ("Run code snippet")? – Sestertium

@Sestertium there are different symbols in the question and answer box. If you hover them, you see their significance. One of them is for making a snippet. – Klondike

Thanks @Klondike Found this explanation and got it in the end: meta.#270253 – Sestertium

Neat. What about when the number of bullet points comes from a database and can vary from say 6 to 22? Defining a short height works good for six but breaks the page when there are a lot. How do you have this wrap into two columns given any number of li's? – Hair

@AndrewKoper I added another solution using column-count which makes that possible. However, in this case you will always get the same number of columns. – Klondike

ul { column-count: 2; } My brain is going "IT CAN'T BE THAT SIMPLE". – Megara

This is gold :) – Hardspun

Answer 2

Consider using CSS3 Multi-column Layout for that:

CSS3 Multiple Columns

You can do that using just one list and define the number of columns with CSS. If you check CSS3 Multi-column layout browser support here you can see partial support by most of the browsers, because they do not support break-before, break-after and break-inside properties. But they do support the properties you will need to create a multi column list with a prefix.

.container {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}

ul {
  margin: 0;
}

<div class="container">
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
  </ul>
</div>

Lamonicalamont

Also a good solution. Not completely self adjusting as the number of cols has to be adjusted. – Sestertium

Actually, this is a much better solution for lists where you might need to add or delete list items. You can set number of columns at responsive break points and forget it. With first (accepted solution), every time you add or delete list items, you have to manually adjust heights; and it's not obvious what height works best for a given number of items: a lot of trial and error. – Ade

using column-width instead of column-count will automatically adjust the number of columns based on the container's width – Euonymus

Answer 3

For the container put in display flex and flex wrap, wrap. Put a class on each li such as container__item, then that put on for that class, flex 0 0 50% (don't grow, don't shrink, and the width 50%).

Dibbrun

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Ebullience