Display a HTML list in columns

This article shows how to use CSS to display an HTML list in two or more columns

When you have an ordered or unordered list you need to display on a website, you can save space, and scrolling, by breaking up the list in columns.

An easy way to do this is by adding the following CSS rules to the list:

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

For example, the following list is broken into 3 columns. If you look at the source you will see that it's a single unordered list.

• Alfa
• Bravo
• Charlie
• Delta
• Echo
• Foxtrot
• Golf
• Hotel
• India
• Juliett
• Kilo
• Lima
• Mike
• November
• Oscar
• Papa
• Quebec
• Romeo
• Sierra
• Tango
• Uniform
• Victor
• Whiskey
• Xray
• Yankee
• Zulu