Multi column list HTML

Multi-column Lists with CSS3

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.

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

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.

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.

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