Wrapping lists into columns

In this article, you will learn how to display ordered list in n columns format using CSS.

Display ordered list in two columns using CSS. #

Here's an example of how we can display an ordered list in two columns using CSS column-count poverty.

ol{
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}

Output : #

Display unordered list in 3 columns. #

In the second example, we will try to display an unordered list in three columns using the column-count property.

<style>
.e-list{
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}
</style>
<ul class="e-list">
  <li>One </li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>