Split Unordered List Into Multiple Columns using CSS3 Columns Property

In this article, we are going to learn how to split the unordered list into multiple columns using pure CSS3 Property column-count.

What is CSS3 “column-count”?

column-count is a CSS3 property, it is used to split list elements into multiple columns and to develop a multi-column and single column layout as well. It is supported by almost all latest Browsers.

However, every CSS3 Property uses some predefined prefix for individual browsers, some of them are mentioned below.

-moz- Prefix is used for Mozilla Firefox, so the final code would be -moz-column-count

-o- is used for Opera, so the final code would be -o-column-count

 -webkit- is used for Safari, so the final code would be -webkit-column-count

Chrome doesn’t need any prefix, so you can use directly as column-count

Why use column-count?

column-count is a very useful property provided by CSS3. It reduces lots of efforts while designing a web page. If you are a Web Designer then this code would help you while creating multi-column blocks with fewer CSS codes.

As you all know that huge amounts of CSS codes increase the load time, which is definitely not good for any website. It increases the size of a website. According to Google, a web page should have its size less than 500KB, it helps Google Crawler to crawl your website faster.

Load Time is one of the major factors for Google Ranking. If you want your website to rank well in Google Search then you must keep your website’s load time as minimum as you can.

Google always says that “you take care of my visitors then I’ll take care of your’s“, Google is very strict about his visitors. Google wouldn’t rank you better if your website doesn’t have a good user experience.

It is always a good idea to keep your website’s load time minimum. It gives the user a good experience to navigate through your website.

suppose, when you have a lot of lists to show on a single page then it is always good to split that list into multiple columns. It increases the professionalism and look and feel as well.

Ordered & Unordered Lists

Ordered List (<ol>) is an HTML element, which is used to generate an ordered list in a web page. By default, this element displays a simple conventional vertical list, which looks something like below.

1. List Item 1
2. List Item 2
3. List Item 3
4. List item 4

as you can see above list, it is displaying digits to order their lists. However, you can change its order type by using the type Attribute, here is a full demonstration to do so.

Unordered List (<ul>) is also an HTML element, which is used to generate bullet lists. By default, it displays a verticle list with no order, that’s why it is called unordered list, below is a conventional look of the unordered list element.

• List Item 1
• List Item 2
• List Item 3
• List Item 4

Can we style our List elements with multi-column CSS property?

The answer is Yes!, we can style List elements with the CSS3 column-count property. However, we can apply this property to any block level elements.

You can use this property for media queries also to set the width of the column automatically. Suppose you need to control column-count depending on the website with you can use media queries here.

In our future post, we definitely talk about how to use this property to other elements, in this post, I am going to focus on List elements only.

Below is an unordered list (<ul>) demonstrated in 4 lines, as you can see lists are arranged in 4 columns, not in their conventional long vertical look.

As you can see above, lists are divided into 4 cols, you can make cols as much as you want. You just have to increase the property value. For above list, I have used column-count:4;

If you want your list to be divided into 6 cols then your code should be,column-count:6; don’t forget to add the browser-specific prefix if you want your web page supports all browsers.

How to make the unordered list into multiple columns?

As you know CSS can be applied using 3 Methods which are Internal, External & Inline CSS. You can apply this code to any of three methods.

But I strongly recommend you to use External CSS Method only. When it comes to On-Site Optimization it would be good to separate all your CSS & HTML codes.

Following is a combined code you should go with. You can use this snippet as your External CSS or Internal CSS as well.

li{
 -webkit-column-count: 4;
 -moz-column-count: 4;
 -o-column-count: 4;
  column-count: 4; 
} 

Related Properties

• columns
• column-fill
• column-gap
• column-rule
• column-span
• column-width

Conclusion

A Huge amount of codes is not good enough to provide the user a good experience, there is always a simple way to do so. So keep your codes as simple and minimum as you can.

You may also like

• Close or Hide DIV when clicking outside
• Multi Level Nested Category System in Codeigniter and MySql
• Facebook like time ago system in php