Using CSS to Display a List in Columns

Here’s a simple list of items which is short across the page:

• Apple
• Raspberry
• Pear
• Plum
• Cherry
• Gooseberry
• Orange

If the content area width is much wider than the content of the list items, for example a list of words, or as in the above example a list of items, breaking the list into multiple columns would make better use of the white space.

There is available a CSS parameter of columns to govern how many columns to break the list into.

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

To implement the example the following was added to the page as an HTML block.

<style>
@media (min-width: 768px) {
  .list-two-cols{
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
  }
}
</style>

Here’s the earlier list with the addition of the class detailed above to give two columns and making use of the whole page width.

• Apple
• Raspberry
• Pear
• Plum
• Cherry
• Gooseberry
• Orange

When the page width is too narrow to implement the 2 columns it will revert to the single, as defined using the media breakpoint.

There is a further associated parameter of column-gap. Column-gap is used to give a gap between columns, it is not added to the outside edges, it left-hand side of column1 and right-hand side of column 2 in the example above.