Multi-column Lists with CSS3

Published on September 26, 2015 by

Before CSS3, it was quite a struggle to have an ordered or unordered list span multiple columns. In fact, people often resorted to either rendering the lists in columns from the server (if possible) or using CSS hacks. Luckily this is no longer necessary in CSS3, because you can easily accomplish this with a new column-count CSS style. Consider the example below.

<ul id="example-list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>

Under normal circumstances, this list would display vertically with list items under one another. To display the above list in three columns, simple apply the following style.

#example-list {
    column-count: 3;
}

With that simple CSS rule, you can easily define how many columns you want the list to contain. The result in this example is that the list items will be evenly divided into three columns. To add support for older browsers, we can add specific prefixes for browsers, like the following.

#example-list {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

That is all it takes to display a list in multiple columns in CSS3.

Featured

Complete CSS3 Flexbox Tutorial

Take an online course and learn the ins and outs of CSS3 flexbox!

Here is what you will learn:

  • To create modern web layouts with flexbox
  • Implement the "Holy Grail" layout
  • Take up the remaining space in a container
  • Design responsive galleries with flexbox
  • ... and more!
CSS logo
Author avatar
Bo Andersen

About the Author

I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!

One comment on »Multi-column Lists with CSS3«

  1. Philippe LAINE

    Thanks ! It works.
    Just added :
    list-style-type: none;
    in CSS in order to avoid useless dots.

Leave a Reply

Your e-mail address will not be published.