Split list into columns using CSS - Create two, three or multi-column list

Let’s face it, long ordered or unordered HTML lists don’t look good in your site content. For instance, long content list items will leave too much useless white space on their right side. Sometime they also require a lot of scrolling to reach their end. There’s a simple solution to this problem. Use CSS to split list into columns, create two, three or multi-column lists. In other words, use any number of columns you need to achieve the best visual effect.

Split list into columns – create multi-column lists

As usual in web development, there are more ways to achieve a solution. Let’s discard one right away when talikng about how to split HTML lists into columns. An inexperienced developer will first think of creating two or three separated HTML lists and float them left. There’s a variety of reasons why not to take this path. You’ll need more code to do it, lists are harder to manage and edit later, just to mention a few. So, what’s the best practice when creating multi-column lists?

Splitting a long list into columns often results with better visual effect.

How to create a two column list with CSS using column-count property

Let’s say you have an twelve items unordered HTML list. For example, to split the list into two columns all you have to do is add a column-count CSS property with a value of 2 to your list style. Simple as that. The same applies to ordered lists and description lists.

To make sure your two column list looks good and it’s cross browser compatible, we have to consider a couple more details. Firstly, to achieve cross-browser compatibility we’ll add column-count property variations for Chrome, Safari and Firefox. Furthermore, to avoid HTML list columns stick to each other, we’ll add some space betwwen them using the column-gap property. Finally, we’ll even add a vertical line between the columns for better visual separation using the column-rule property.

All the CSS code you need to create a two column list:


ul {
-webkit-column-count: 2;  /* Chrome/Opera, Safari */
-moz-column-count: 2; /* Mozilla Firefox */
column-count: 2;

/* Properties below are optional: */
-webkit-column-gap: 50px; /* Chrome/Opera, Safari */
-moz-column-gap: 50px; /* Mozilla Firefox */
column-gap: 50px;

-webkit-column-rule: 1px single grey; /* Chrome/Opera, Safari */
-moz-column-rule: 1px single grey; /* Mozilla Firefox */
column-rule: 1px single grey;
}

Using column-count to split list into columns

To create a three column list simply change the value of the all three column-count properties in the example above from 2 to 3. Additionally, adjust the column-gap property according to the three column HTML list format.

If you are creating a multi-column HTML list, just change the column-count and column-gap value to your specific needs.

Making multi-column HTML list responsive

No need to mention todays websites must be designed to be responsive. Your multi column HTML lists sure looks good now on desktop monitors. Unfortunately, on lower resolution tablet and smartphone screens, multi-column lists could break and become unreadable. Therefore, you should consider changing the column-count and column-gap properties for each responsive breaking point.

If you use a three or more column list on the desktop site, we suggest switching to two column list for tablets and single column list for smartphones. The fix is simple. Just add column-count and column-gap properties to your list style in your theme’s responsive styleseet and set different values for each breaking point. Don’t forget to set the column-rule property to none for the single column list.

More styling HTML list suggestions

Now that you created your multi column HTML lists, you might want to style them furthermore. Try out list alignment CSS properties or change the color and shape of the list bullet points. Make your HTML lists easy to read and stand out in the content.

Styling HTML lists furthermore with CSS

This example showed you one useful method of styling HTML lists. Simmilary, by adding a couple more CSS properties to your list CSS style you make your list look even better. Furthermore, you could perfectly align your list or change color and shape of bullet points and make it stand out even more.

Learn more methods of styling HTML lists:

How to split lists into columns using CSS