Two-column list items HTML CSS

In this post, I will show you how to create a two-column list in HTML & CSS. This could be an ordered or unordered list.

Some of you may have tried to create a two-column at first and then put your list items separately on those divs. But this is not what I am going to do.

Instead, I will write some CSS to automatically lay out the list items in two columns. Also, this will be mobile responsive. That means, on mobile & smaller screens, this will be one column list. And on the larger screens, this will be 2 columns.

Let’s get started.

Create a two-column list

Two-column unordered list
Two-column unordered list

To demonstrate this purpose, I have the following HTML & CSS.

HTML

<div class="container">
  <ul>
    <li>Lorem ipsum dolor sit amet consectetur adipisicing.</li>
    <li>Saepe quia dignissimos ipsam elit.</li>
    <li>Atnumquam amet pariatur vel dolorem nam aliquid.</li>
    <li>Neque soluta sunt similique perferendis.</li>
    <li>Vel placeat aliquam nulla velit.</li>
    <li>Labore voluptates impedit?</li>
    <li>Adipisicing elit dicta nostrum libero temporibus.</li>
    <li>Ipsum dolor sit amet consecteturasperiores incidunt maiores.</li>
    <li>Consectetur laboriosam accusantium eaque voluptatibus.</li>
    <li>Eanon perferendis suscipit reiciendis</li>
    <li>Sitamet adipisicing elit dolore asperiores.</li>
  </ul>
</div>

In this example, I did not use the container div. This is just for adding background color and padding. So you can skip it as well.

CSS

ul {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  ul {
    grid-template-columns: repeat(2, auto);
    -webkit-column-gap: 30px;
       -moz-column-gap: 30px;
            column-gap: 30px;
  }
}

This is how you can make a two-column list. However, if you need more than two columns, you need to change just one line of CSS.

For example, if you need a three-column list, your CSS will be as follows:

grid-template-columns: repeat(3, auto);

So on and so forth.

Working with an ordered list

If you are working with an ordered (numbered) list, you can use the same approach as the last example. However, there is a caveat that you may have not noticed yet. Please see the screenshot below to better understand the types.

Two types of two-column ordered list
Two types of a two-column ordered list

In the screenshot above, the first example (Horizontally distributed two-column list) distributes the list items horizontally. All the odd numbers live on the left side and even numbers live on the right side.

In the second example (Vertically distributed two-column list), the numbers/items started from 1 and serially went until the end.

None of the approaches are wrong. In some cases, the first example is correct format and in some cases, the second example is perfect. However, most of you may want/like the second example.

In this section, I will show you both.

Two-column ordered list (Horizontally distributed)

Horizontally distributed two-column ordered list
Horizontally distributed two-column ordered list

For this example, I have the following HTML.

HTML

<div class="container">
  <ol>
    <li>Lorem ipsum dolor sit amet consectetur adipisicing.</li>
    <li>Saepe quia dignissimos ipsam elit.</li>
    <li>Atnumquam amet pariatur vel dolorem nam aliquid.</li>
    <li>Neque soluta sunt similique perferendis.</li>
    <li>Vel placeat aliquam nulla velit.</li>
    <li>Labore voluptates impedit?</li>
    <li>Adipisicing elit dicta nostrum libero temporibus.</li>
    <li>Ipsum dolor sit amet consecteturasperiores incidunt maiores.</li>
    <li>Consectetur laboriosam accusantium eaque voluptatibus.</li>
    <li>Eanon perferendis suscipit reiciendis</li>
    <li>Sitamet adipisicing elit dolore asperiores.</li>
  </ol>
</div>

And I have the following CSS.

CSS

.container {
  /* optional */
  background-color: #c7eaff;
  padding: 60px 15px;
  max-width: 1100px;
  margin: 0 auto;
}
.container ol {
  display: grid;
  /* for mobile (one-column) */
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .container ol {
    /* for large devices (two-column) */
    grid-template-columns: repeat(2, auto);
    -webkit-column-gap: 30px;
       -moz-column-gap: 30px;
            column-gap: 30px;
  }
}

This is you can create a horizontally distributed two-column ordered list.

Two-column ordered list (Vertically distributed)

Vertically distributed two-column ordered list
Vertically distributed two-column list items

To organize the list items like this example, you need to reorganize the HTML markup a little bit. However, it’s very simple.

HTML

<div class="container">
  <ol>
    <li>Lorem ipsum dolor sit amet consectetur adipisicing.</li>
    <li>Saepe quia dignissimos ipsam elit.</li>
    <li>Atnumquam amet pariatur vel dolorem nam aliquid.</li>
    <li>Neque soluta sunt similique perferendis.</li>
    <li>Vel placeat aliquam nulla velit.</li>
    <li>Labore voluptates impedit?</li>
  </ol>
  <ol start="7">
    <li>Adipisicing elit dicta nostrum libero temporibus.</li>
    <li>Ipsum dolor sit amet consecteturasperiores incidunt maiores.</li>
    <li>Consectetur laboriosam accusantium eaque voluptatibus.</li>
    <li>Eanon perferendis suscipit reiciendis</li>
    <li>Sitamet adipisicing elit dolore asperiores.</li>
  </ol>
</div> <!-- .container -->

As you see in the above HTML, I created two <ol> and listed the items separately. Here you see an extra HTML attribute which is start.

By default, the ordered list starts from 1 and increases by 1. If you mention/assign a start attribute with a number, it will change the default starting value. In my example, the start="7" will make the second list start to count from 7.

CSS

.container {
  display: grid;
  /* for mobile & smaller screens */
  grid-template-columns: 1fr;

  /* optional */
  background-color: #BFFFCC;
  padding: 60px 15px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .container {
    /* for large screens (two-column) */
    grid-template-columns: 1fr 1fr;
  }
}
.container ol {
  /* optional */
  margin: 0;
}

And this brings me to the end of this post.

List related posts:

Learn & practice CSS with real-world examples
Learn basic CSS from the ground up.
Build real projects in HTML CSS.
Make your hands dirty

Conclusion

Here I showed you multiple examples and real-world use cases of two-column lists.

To create the layout, I used CSS Grid. But everything can be also done by Flexbox. If you want to learn about Flexbox in detail & make your hands dirty, see this post.