58

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?

2 Answers 2

91

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>

8
  • 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. Mar 5, 2017 at 22:18
  • BTW: How can I make such inline demo ("Run code snippet")? Mar 5, 2017 at 22:20
  • @Sempervivum 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.
    – Johannes
    Mar 5, 2017 at 23:54
  • Thanks @Johannes Found this explanation and got it in the end: meta.stackoverflow.com/questions/269753/… Mar 6, 2017 at 8:07
  • 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? Nov 27, 2019 at 14:45
21

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>

3
  • 2
    Also a good solution. Not completely self adjusting as the number of cols has to be adjusted. Mar 6, 2017 at 8:30
  • 6
    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.
    – Ray
    May 22, 2017 at 2:06
  • 4
    using column-width instead of column-count will automatically adjust the number of columns based on the container's width
    – jnnnnn
    Sep 22, 2017 at 3:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.