How to Display Unordered List in Two Columns

In this tutorial, you can see how to display an unordered list in two columns with a little CSS. We’ll demonstrate examples with the CSS columns and column-count properties.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Use the <ul> element for an unordered list and add <li> elements.
<ul>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
</ul>

Add CSS

  • Use the columns property and specify “2” as a value. Also, add the -webkit- and -moz- prefixes.
ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

Example of displaying an unordered list in two columns with the columns property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Some text</li>
      <li>Some text</li>
      <li>Some text</li>
      <li>Some text</li>
      <li>Some text</li>
      <li>Some text</li>
    </ul>
  </body>
</html>

Result

  • Some text
  • Some text
  • Some text
  • Some text
  • Some text
  • Some text

Example of displaying an unordered list in two columns with the column-count property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        column-count: 2;
        column-rule: dotted 1px #333;
        list-style-type: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Some text</li>
      <li>Some text</li>
      <li>Some text</li>
      <li>Some text</li>
      <li>Some text</li>
      <li>Some text</li>
    </ul>
  </body>
</html>